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

Question

I am currently working on chart.js with react-chart-js-2. My package.json includes the following dependencies:

"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",
        ...
    },

And the following dev dependencies:

"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",
        ...
    }

I would like to display a chart with stacked bars, that take 100% of the space, and I found this plugin that does exactly the job: chartjs-plugin-stacked100 (you can find a working demo here).
However, when I want to use this plugin in my react app (using typescript, by the way), I got some errors.

I install the plugin using the following command:
npm install chartjs-plugin-stacked100 --save

Then in a .tsx file, I'm trying to import the plugin :
import ChartjsPluginStacked100 from "chartjs-plugin-stacked100";
The import is failing, with the following error:

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';

There is no such package for the types sadly.
But thanks to this post in Stack Overflow, I created a file global.d.ts at the root of my src folder, and added the following code inside :

declare module 'chartjs-plugin-stacked100';

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

And now, I am getting the following error on the import of the plugin: Unable to resolve path to module 'chartjs-plugin-stacked100'.

So I can't use this plugin, because I can't import it correctly. Am I doing something wrong?

I tried to create a reproducible example on sandbox, which is actually working( I even added my tsconfig.json and my eslintrc.json, because I thought it could have cause this issue).

Do you have any hint about this failing import ?

score 0 · Accepted Answer · answered Nov 26 '21 at 14:46

I found out that my error was caused by my eslintrc configuration. So I just had to add this in the .eslintrc.json (in the root of my src folder):

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

So now I am able to import the js module

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

1 Answers1