Compile error on Cannot find module 'chart.js/dist/types/utils' or its corresponding type declarations with chartjs v3

[Huncuska]

Hi! 👋

Firstly, thanks for your work on this project!

I was updating angular from v14 to v17 and thus ng2-charts from v2.4.2 to v6.0.1 and chartjs from v2.9.4 to v3.9.1 on my project and i kept having the following error:

Error: node_modules/ng2-charts/lib/ng-charts.provider.d.ts:3:29 - error TS2307: Cannot find module 'chart.js/dist/types/utils' or its corresponding type declarations.

3 import { DeepPartial } from 'chart.js/dist/types/utils';
                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~

✖ Failed to compile.

I guess "ng2-charts": "^6.0.1" does only support chartjs v4, but this migration is not yet possible for me. 😢

To fix my issue, I used patch-package to patch [email protected].

Here is the diff that solved my problem:

diff --git a/node_modules/ng2-charts/lib/ng-charts.provider.d.ts b/node_modules/ng2-charts/lib/ng-charts.provider.d.ts
index 1a2ca00..815decd 100644
--- a/node_modules/ng2-charts/lib/ng-charts.provider.d.ts
+++ b/node_modules/ng2-charts/lib/ng-charts.provider.d.ts
@@ -1,6 +1,6 @@
 import { InjectionToken } from '@angular/core';
 import { ChartComponentLike, Defaults } from 'chart.js';
-import { DeepPartial } from 'chart.js/dist/types/utils';
+import { DeepPartial } from 'chart.js/types/utils';
 export declare const NG_CHARTS_CONFIGURATION: InjectionToken<NgChartsConfiguration>;
 export type NgChartsConfiguration = {
     /**

This issue body was partially generated by patch-package.

[LuGr-01]

I am facing the same error using pnpm and:

• ng2-charts: 6.0.1
• chart.js: 4.4.3
• typescript: 5.5.3
• @angular/compiler: 18.1.0

Application bundle generation failed. [6.013 seconds]

✘ [ERROR] TS2307: Cannot find module 'chart.js/dist/types/utils' or its corresponding type declarations. [plugin angular-compiler]

    ../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_@angular+pla_jqs4iodj7gs6carqputrxejine/node_modules/ng2-charts/lib/ng-charts.provider.d.ts:3:28:
      3 │ import { DeepPartial } from 'chart.js/dist/types/utils';

As this is a typescript error regarding not finding a type definition a possible temporary solution would be to disable LibChecking in tsconfig.json file via:

{
    "skipLibCheck": true
}

[adrian-heath]

I started to run into this issue today whilst changing tsconfig from

"module": "ES2022",
"moduleResolution": "node",

to

"module": "ES2022",
"moduleResolution": "bundler",

This change is needed to support typescript-eslint compatible with eslint 9

typescript-eslint/typescript-eslint#7284

I need a solution that will support both ng2-charts and eslint 9/typescript-eslint.

[simondingle]

Same, switched from 'node' to 'bundler' & now can't compile.

[adams85]

FWIW, I could make it work by adding this to tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "chart.js/dist/types/utils": ["node_modules/chart.js/dist/types/utils.d.ts"]
    }
  }
}

[CyrilCermak]

This is what fixed it for me, I noticed that in my version the path has changed, types/utils is no longer under dist/types/utils but it has it's own directory on the package root /types/utils. With that I was able to compile again.

In the tsconfig.json:

"compilerOptions": {
  "paths": {
      "chart.js/dist/types/utils": ["node_modules/chart.js/types/utils"]
    }
}