无法解析模块 'chartjs-plugin-stacked100' 的路径

Question

我目前正在 chart.js 与 react-chart-js-2 合作。我的 package.json 包含以下依赖项：

"dependencies": {
        "chart.js": "^3.6.0",
        "chartjs-plugin-stacked100": "^1.0.4",
        "react": "^17.0.2",
        "react-chartjs-2": "^3.3.0",
        "typescript": "^3.9.5",
        ...
    },

以及以下开发依赖项：

"devDependencies": {
        "@typescript-eslint/eslint-plugin": "^4.28.0",
        "@typescript-eslint/parser": "^4.28.0",
        "eslint": "^7.29.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-import-resolver-typescript": "^2.4.0",
        ...
    }

我想显示一个带有堆叠条形图的图表，它占 space 的 100%，我发现这个插件完全可以完成这项工作：chartjs-plugin-stacked100 (you can find a working demo here)。
但是，当我想在我的 React 应用程序中使用这个插件时（顺便说一下，使用 typescript），我遇到了一些错误。

我使用以下命令安装插件：
npm install chartjs-plugin-stacked100 --save

然后在 .tsx 文件中，我尝试导入插件 :
import ChartjsPluginStacked100 from "chartjs-plugin-stacked100";
导入失败，出现以下错误：

Could not find a declaration file for module 'chartjs-plugin-stacked100'. 'c:/Users/Nutzer/Documents/git/Infinite-UI/node_modules/chartjs-plugin-stacked100/build/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/chartjs-plugin-stacked100` if it exists or add a new declaration (.d.ts) file containing `declare module 'chartjs-plugin-stacked100';

遗憾的是，没有此类包。
但是感谢 Stack Overflow 中的 this post，我在 src 文件夹的根目录下创建了一个文件 global.d.ts，并在其中添加了以下代码：

declare module 'chartjs-plugin-stacked100';

declare module 'chartjs-plugin-stacked100'{
    export function ChartjsPluginStacked100(): function
}

现在，我在导入插件时遇到以下错误： Unable to resolve path to module 'chartjs-plugin-stacked100'.

所以我不能使用这个插件，因为我无法正确导入它。我做错了什么吗？

我试图在 sandbox 上创建一个可重现的示例，它确实有效（我什至添加了我的 tsconfig.json 和我的 eslintrc.json，因为我认为它可能会导致这个问题).

关于这个失败的导入，你有什么提示吗？

Answer 1

我发现我的错误是由我的 eslintrc 配置引起的。所以我只需要将它添加到 .eslintrc.json（在我的 src 文件夹的根目录中）：

"settings": {
        "import/resolver": {
            "node": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"]
              }
        }
    }

所以现在我可以导入 js 模块了

无法解析模块 'chartjs-plugin-stacked100' 的路径

Unable to resolve path to module 'chartjs-plugin-stacked100'

reactjs

typescript

chart.js

react-chartjs-2