上下文
我创建了一个自定义的 npm 包,其中包含我在项目中导入的组件。除了出现此错误的类型和函数外,一切正常:
在“@espe/components-front”eslint(导入/命名)中找不到 useWindowDimensions
这里是我如何将它导入我的项目:
import { useWindowDimensions } from '@espe/components-front'
project/eslintrc.json
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:import/recommended",
"plugin:jsx-a11y/recommended",
"plugin:@typescript-eslint/recommended",
// must be last:
"plugin:prettier/recommended"
],
"settings": {
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"]
},
// Tells eslint how to resolve imports
"import/resolver": {
"node": {
"paths": ["src"],
"extensions": [".js", ".jsx", ".ts", ".tsx"]
},
"typescript": {}
}
},
"plugins": [
"unused-imports"
],
"rules": {
"import/no-named-as-default": 0,
"unused-imports/no-unused-imports": "warn",
"@typescript-eslint/no-explicit-any": "warn",
"react-hooks/exhaustive-deps": "off",
...
}
}
当我运行项目时,出现此错误:
捕获语法错误:请求的模块“/node_modules/.vite/deps/@espe_components-front.js?v=4507f80d”不提供名为“useWindowDimensions”的导出
封装架构和导出线
- src
|_ index.ts // export * from './hooks'
|_ hooks
|_ index.ts // export * from './useWindowDimensions'
|_ useWindowDimensions.ts // export const useWindowDimensions = () => { ... }
包/tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"esModuleInterop": true,
"lib": [
"DOM",
"DOM.Iterable",
"ESNext"
],
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"jsx": "react-jsx",
"module": "ESNext",
"declaration": true,
"sourceMap": true,
"outDir": "dist",
"declarationDir": "dist/types",
"moduleResolution": "node",
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"emitDeclarationOnly": true,
"baseUrl": ".",
"paths": {
"@assets/*": ["src/assets/*"],
"@components/*": ["src/components/*"],
"@constants/*": ["src/constants/*"],
"@hooks/*": ["src/hooks/*"]
},
"typeRoots": ["node_modules/@types", "src/components/index.d.ts"]
},
"include": ["src"],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}
包/package.json
{
"name": "@espe/components-front",
"version": "1.0.4",
"description": "",
"scripts": {
"build": "vite build && tsc"
},
"main": "./dist/ap27333-components-front.umd.js",
"module": "./dist/ap27333-components-front.es.js",
"types": "dist/types/index.d.ts",
"files": [
"dist",
"src"
],
"exports": {
".": {
"import": "./dist/ap27333-components-front.es.js",
"require": "./dist/ap27333-components-front.umd.js"
},
"./dist/style.css": "./dist/style.css"
},
"devDependencies": {
...
},
"peerDependencies": {
...
}
}
我尝试将导出更改为默认值,
package/tsconfig.json
中的各种配置调整基于其他 stackoverflow 问题,但找不到解决方案。
我的猜测是,也许我导出的方式错误或者包配置错误,有人知道吗?