x not found in 'customNpmPackage' eslint import/named error but is exported

问题描述 投票:0回答:0

上下文

我创建了一个自定义的 npm 包,其中包含我在项目中导入的组件。除了出现此错误的类型和函数外,一切正常:

在“@espe/components-front”eslint(导入/命名)中找不到 useWindowDimensions

这里是我如何将它导入我的项目:

import { useWindowDimensions } from '@espe/components-front'

VSCode确实找到了对应的函数(见截图)-> VSCode prompt when hovering useWindowDimensions

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 问题,但找不到解决方案。

我的猜测是,也许我导出的方式错误或者包配置错误,有人知道吗?

reactjs npm package.json tsconfig typescript-eslint
© www.soinside.com 2019 - 2024. All rights reserved.