error TS7016: Could not find a declaration file for module 'd3-scale'. Versions 19.1.0 through 20.1.2

[jlquijada]

Describe the bug
I updated my project to use the version 19.1.0, and now I get this build error:

✔ Browser application bundle generation complete.

Warning: C:\ClientApp\node_modules@swimlane\ngx-charts_ivy_ngcc_\fesm2015\swimlane-ngx-charts.js depends on 'clone-deep'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Error: node_modules/@swimlane/ngx-charts/lib/box-chart/box-chart.component.d.ts:5:40 - error TS7016: Could not find a declaration file for module 'd3-scale'. 'C:/ClientApp/node_modules/d3-scale/dist/d3-scale.js' implicitly has an 'any' type.
Try npm i --save-dev @types/d3-scale if it exists or add a new declaration (.d.ts) file containing declare module 'd3-scale';

5 import { ScaleLinear, ScaleBand } from 'd3-scale';
~~~~~~~~~~

Error: node_modules/@swimlane/ngx-charts/lib/box-chart/box-series.component.d.ts:2:40 - error TS7016: Could not find a declaration file for module 'd3-scale'. 'C:/ClientApp/node_modules/d3-scale/dist/d3-scale.js' implicitly has an 'any' type.
Try npm i --save-dev @types/d3-scale if it exists or add a new declaration (.d.ts) file containing declare module 'd3-scale';

2 import { ScaleLinear, ScaleBand } from 'd3-scale';
~~~~~~~~~~

Error: node_modules/@swimlane/ngx-charts/lib/box-chart/box.component.d.ts:2:26 - error TS7016: Could not find a declaration file for module 'd3-selection'. 'C:/ClientApp/node_modules/d3-selection/dist/d3-selection.js' implicitly has an 'any' type.
Try npm i --save-dev @types/d3-selection if it exists or add a new declaration (.d.ts)
file containing declare module 'd3-selection';

2 import { BaseType } from 'd3-selection';
~~~~~~~~~~~~~~

Error: node_modules/@swimlane/ngx-charts/lib/bubble-chart/bubble-chart.utils.d.ts:1:52 - error TS7016: Could not find a declaration file for module 'd3-scale'. 'C:/ClientApp/node_modules/d3-scale/dist/d3-scale.js' implicitly has an 'any' type.
Try npm i --save-dev @types/d3-scale if it exists or add a new declaration (.d.ts) file containing declare module 'd3-scale';

1 import { ScaleLinear, ScalePoint, ScaleTime } from 'd3-scale';

ngx-charts version
19.1.0

Additional context
when I revert to version 19.0.1, everything works again.
Angular 12.2.9

[alanpurple]

you should install @types/d3 in dev dependencies

this is not a bug

[BingeCode]

you should install @types/d3 in dev dependencies

this is not a bug

Newly installed ngx-charts today in my Angular project and this fixed it for me.

npm install @types/d3 --save-dev

[bbarry]

you should specify @types/d3 in peer dependencies

this is a bug

[jlquijada]

This is the same bug case as in #1620

The thing is my project does not make direct use of that @types/d3, it is a dependency of @swimlane/ngx-charts, so they have to include @types/d3 as their dependency.

Clearly it was skipped from 19.0.1 to 19.1.0, same as @types/d3-shape was skipped when moving from 17.0.1 to 18.0.0 (solved in #1620)

[jlquijada]

This problem persists with version 19.2.0

[jlquijada]

Still getting this problem with version 20.0.1
:(

[cp-ericwarrington]

With ngx-charts 20.0.1 and Angular 13 I get build errors and have to google the solution.

Installing @types/d3 as a dev dependency solved the problem for me. Please add @types/d3 to your peer-dependencies so people looking there find the solution.

[chunkingz]

I agree with @jlquijada I just installed v20.0.1 and got the same error, I had to run npm install @types/d3 --save-dev as suggested by @BingeCode and it works. I hope they can fix this as soon as possible.

[martibenn]

Agree with @jlquijada
We should not add @types/d3 dependency in our project => don't use it. It's ngx-charts responsability to specifiy a dependency to @types/d3

Please fix this so we all can remove this dependency of our projects. Pull request #1727 can take care of this

[tahaerden]

Same issue. Just installed version "^20.0.1" to face this error.
Running npm install @types/d3 --save-dev fixed the issue, but we shouldn't be have to install it manually.

[jlquijada]

Still getting this problem with version 20.1.0
:(
Note that I'm aware of the possible patch on my side, it is just that it is not my responsibility to keep third-party dependencies that my project does not directly reference.
Until it is fixed, I prefer to stay in version 19.0.1, as I don't need the latest features/changes on @swimlane/ngx-charts.

[adudecoder]

you should install @types/d3 in dev dependencies
this is not a bug

Newly installed ngx-charts today in my Angular project and this fixed it for me.

npm install @types/d3 --save-dev

This really works for me!

[jmgomez1986]

this fixed it for me.

you should install @types/d3 in dev dependencies
this is not a bug

Newly installed ngx-charts today in my Angular project and this fixed it for me.

npm install @types/d3 --save-dev

this fixed it for me. Thanks

[tayambamwanza]

This should be specified in documentation, I am a brand new user, when it comes to getting started it only says to install ngx-charts, I think you should just put npm install @types/d3 --save-dev as well to reduce confusion, a lot of libraries include such additional information, no shame in including it.

[Ismailharik]

when i installed npm install @types/d3 --save-dev i have got this error

./node_modules/@angular/cdk/fesm2015/portal.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
TypeError: Cannot create property 'message' on string 'C:\Users\pc\Documents\Mes_Projets\Java-angular\admin-dashboard\node_modules@angular\cdk\fesm2015\portal.mjs: This application depends upon a library published using Angular version 14.0.1, which requires Angular version 14.0.0 or newer to work correctly.
Consider upgrading your application to use a more recent version of Angular.
413 | }
414 | CdkPortal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkPortal, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });

415 | CdkPortal.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"], usesInheritance: true, ngImport: i0 });
| ^^^^^^^^^^^^^^^^^39m^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^39m^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
416 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CdkPortal, decorators: [{
417 | type: Directive,
418 | args: [{'
at run (C:\Users\pc\Documents\Mes_Projets\Java-angular\admin-dashboard\node_modules@babel\core\lib\transformation\index.js:37:15)
at run.next ()
at Function.transform (C:\Users\pc\Documents\Mes_Projets\Java-angular\admin-dashboard\node_modules@babel\core\lib\transform.js:25:41)
at transform.next ()
at step (C:\Users\pc\Documents\Mes_Projets\Java-angular\admin-dashboard\node_modules\gensync\index.js:261:32)
at C:\Users\pc\Documents\Mes_Projets\Java-angular\admin-dashboard\node_modules\gensync\index.js:273:13
at async.call.result.err.err (C:\Users\pc\Documents\Mes_Projets\Java-angular\admin-dashboard\node_modules\gensync\index.js:223:11)
at C:\Users\pc\Documents\Mes_Projets\Java-angular\admin-dashboard\node_modules\gensync\index.js:37:40

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

× Failed to compile.

[entozoon]

@Ismailharik That's irrelevant to this issue thread but also it quite clearly explains you need to upgrade angular.

[jlquijada]

Still unsolved, will phase-out this package in favor of "chart.js": "^4.0.1", ASAP (much simpler, no dependencies, and does the same job for my project without problems)

[zorochimaru777]

Why do I need to google for this??? Still exist on 20.1.2

[michalczerwinski]

This is a bug. Adding d3 in app after adding dependency for ngx-charts is only workaround, can we have this fixed?

[iliedorobat]

Setting noImplicitAny: false worked for me. But this is another workaround that disables type checking.

[PDS42]

You should not be disabling type checking in your TS application over some dependency problem. Just use the package @types/d3 until they fix it.

[malabuyocfritz1984]

why do we need @types/d3 dependency in our project? it should be ngx chart responsibility. This library is a pain the arse!!!

[rudxde]

you can add "skipLibCheck": true, to your tsconfig.json files compilerOptions section.

[Harikarandev]

you should install @types/d3 in dev dependencies
this is not a bug

Newly installed ngx-charts today in my Angular project and this fixed it for me.

npm install @types/d3 --save-dev

i don't thinks event after installing the @types/d3 i am getting errors

Try npm i --save-dev @types/d3-scale if it exists or add a new declaration (.d.ts) file containing declare module 'd3-scale';

1 import { ScaleLinear, ScalePoint, ScaleTime } from 'd3-scale';