[英]Why do I have to include "/dist" in library import
I am writing a react component library with vite as my build tool.我正在用 vite 作为我的构建工具编写一个反应组件库。
I've compiled the project and deployed it to the npm registry.我已经编译了项目并将其部署到 npm 注册表。 When I am importing it from my client app, I have to include "/dist" in the import.
当我从我的客户端应用程序导入它时,我必须在导入中包含“/dist”。
From the client app, importing like below...从客户端应用程序,导入如下...
import { Tuple } from 'tuple-ui';
...results in the error below in vscode: ...导致 vscode 中出现以下错误:
Could not find a declaration file for module 'tuple-ui'. '/arbitrary/path/tuple/dist/tuple.umd.js' implicitly has an 'any' type. Try `npm i --save-dev @types/tuple-ui` if it exists or add a new declaration (.d.ts) file containing `declare module 'tuple-ui';`ts(7016)
However, when I include "dist" in the import...但是,当我在导入中包含“dist”时......
import { Tuple } from 'tuple-ui/dist';
...The error goes away. ...错误消失了。
Below is my vite.config.ts for the component library:下面是我的组件库的 vite.config.ts:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import dts from 'vite-plugin-dts';
import * as path from 'path';
export default defineConfig({
plugins: [
react(),
dts({
insertTypesEntry: true,
}),
],
build: {
lib: {
entry: path.resolve(__dirname, 'src/lib/index.ts'),
name: 'tuple',
fileName: 'tuple'
},
rollupOptions: {
external: ['react', 'react-dom'],
output: {
globals: {
react: 'React',
'react-dom': 'ReactDOM',
}
}
}
},
})
And here is the package.json:这是 package.json:
{
"name": "tuple-ui",
"version": "0.0.10",
"license": "MIT",
"author": "budl",
"scripts": {
"dev": "vite",
"tsc": "tsc",
"tscv": "tsc --version",
"build": "tsc && vite build",
"preview": "vite preview",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"chromatic": "npx chromatic --project-token=e183f70dfe01"
},
"dependencies": {
"chromatic": "^6.9.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"@babel/core": "^7.18.6",
"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-interactions": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
"@storybook/builder-vite": "^0.1.38",
"@storybook/react": "^6.5.9",
"@storybook/testing-library": "^0.0.13",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@vitejs/plugin-react": "^1.3.0",
"babel-loader": "^8.2.5",
"typescript": "^4.9.4",
"vite": "^2.9.9",
"vite-plugin-dts": "^0.9.10"
},
"readme": "ERROR: No README data found!",
"type": "module",
"files": [ "dist" ],
"main": "./dist/tuple.umd.js",
"module": "./dist/tuple.es.js",
"exports": {
".": {
"import": "./dist/tuple.es.js",
"require": "./dist/tuple.umd.js"
}
}
}
You are getting this error because you developed your library using typescript and you don't have module declarations in your library for typescript files, even you can see how the error is suggesting to you to run this command in order to install the library's types:您收到此错误是因为您使用 typescript 开发了您的库并且您的库中没有用于 typescript 文件的模块声明,即使您可以看到错误是如何建议您运行此命令以安装库的类型:
npm i --save-dev @types/tuple-ui
So in this case you have two options:所以在这种情况下你有两个选择:
1- Run the suggested command and see if it fixes your problem. 1- 运行建议的命令,看看它是否解决了您的问题。
2- Write your library declaration files. 2- 编写您的库声明文件。 (Here you can get more documentation about it: https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html )
(在这里你可以获得更多关于它的文档: https ://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html)
The error goes away when you import the /dist directory because in this directory you have your typescript files transpiled to javascript.当您导入 /dist 目录时错误消失,因为在此目录中您将打字稿文件转换为 javascript。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.