Ngx-charts: Module build failed: TypeError: Cannot read property 'kind' of undefined

[allensutton]

Describe the bug
When doing a prod build for ngx-charts 13.0.1, an error is thrown for angular-devkit's scrub-file.js

To Reproduce
Steps to reproduce the behavior:

1. Create project with ngx-charts as a dependency, at 13.0.1
2. ng build --prod
3. Error is thrown
4. Use 12.1.0 instead
5. Error is not present (there is, but it's about AxisLabelComponent and is therefore a separate issue)

Expected behavior
No errors when using 13.0.1

Screenshots

Demo
Only present during build/serve with --prod flag

ngx-charts version
"@swimlane/ngx-charts": "^13.0.1",

Additional context
ERROR in ./node_modules/@swimlane/ngx-charts/fesm5/swimlane-ngx-charts.js
Module build failed: TypeError: Cannot read property 'kind' of undefined
at isAngularDecoratorMetadataExpression (C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:242:35)
at checkNodeForDecorators (C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:67:21)
at visitNodes (C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:14809:30)
at Object.forEachChild (C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:15033:24)
at checkNodeForDecorators (C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:58:31)
at visitNode (C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:14800:24)
at Object.forEachChild (C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:14928:21)
at checkNodeForDecorators (C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:58:31)
at visitNode (C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:14800:24)
at Object.forEachChild (C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:14985:24)
at checkNodeForDecorators (C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:58:31)
at visitNode (C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:14800:24)
at Object.forEachChild (C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:14996:24)
at checkNodeForDecorators (C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\node_modules\@angular-devkit\build-optimizer\src\transforms\scrub-file.js:58:31)
at visitNode (C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:14800:24)
at Object.forEachChild (C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:14893:21)
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/area-chart/area-chart.module' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/bar-chart/bar-chart.module' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/bubble-chart/bubble-chart.module' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/common/axes/axes.module' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/common/chart-common.module' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/common/tooltip/injection.service' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/common/tooltip/tooltip.module' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/common/tooltip/tooltip.service' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/force-directed-graph/force-directed-graph.module' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/gauge/gauge.module' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/heat-map/heat-map.module' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/line-chart/line-chart.module' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/ngx-charts.module' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/number-card/number-card.module' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/pie-chart/pie-chart.module' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/polar-chart/polar-chart.module' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@swimlane/ngx-charts/release/tree-map/tree-map.module' in 'C:\Users\AXSUTT2\angular-projects\top-view-ui\TopologyViewer-UI\angular\src\app'

Package.json:
{
"name": "obfuscated",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.2",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/flex-layout": "^6.0.0-beta.17",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/material": "^6.4.2",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"@ng-bootstrap/ng-bootstrap": "^3.0.0",
"@swimlane/ngx-charts": "^13.0.1",
"@swimlane/ngx-graph": "^6.2.0",
"@types/circular-json": "^0.4.0",
"@types/d3-shape": "^1.3.2",
"@types/googlemaps": "^3.30.11",
"ag-grid-angular": "^20.0.0",
"ag-grid-community": "^20.0.0",
"angular-oauth2-oidc": "^4.0.2",
"angular-user-idle": "^2.0.0",
"core-js": "^2.5.4",
"file-saver": "^1.3.8",
"flat": "^5.0.0",
"font-awesome": "^4.7.0",
"googlemaps": "^1.12.0",
"hammerjs": "^2.0.8",
"install": "^0.12.1",
"jszip": "^3.1.5",
"ng2-cookies": "^1.0.12",
"ngx-loading": "^1.0.14",
"ngx-perfect-scrollbar": "^6.2.1",
"ngx-toastr": "^8.10.1",
"npm": "^6.2.0",
"primeicons": "^1.0.0-beta.9",
"primeng": "^6.0.1",
"rxjs": "6.0.0",
"stream": "0.0.2",
"timers": "^0.1.1",
"tokml": "^0.4.0",
"xlsx": "^0.13.3",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.0",
"@angular/cli": "~6.0.0",
"@angular/compiler-cli": "^6.0.0",
"@angular/language-service": "^6.0.0",
"@types/flat": "0.0.28",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
}

[vankeer]

Same build error with ngx-charts 13 here. For now I keep using 12, although I had this issue which can be resolved by adding the d3 dependencies to package.json.

[HJesusH]

Same issue, i had to use the 12.0.1 version

[Hanmant-Patil]

Issue resolved & it is due to version mismatch of ngx-chart & d3.
Solution :

1. Delete node module folder
2. Change ngx-chart & D3 Version to below
   "@swimlane/ngx-charts": "^12.0.1",
   "d3": "^4.13.0"
3. npm install --save

[allensutton]

Issue resolved & it is due to version mismatch of ngx-chart & d3.
Solution :

1. Delete node module folder
2. Change ngx-chart & D3 Version to below
   "@swimlane/ngx-charts": "^12.0.1",
   "d3": "^4.13.0"
3. npm install --save

I just need d3-shape for my project - do you know if using d3-shape v1.3.7 instead of v1.3.2 will also fix this, or do I actually have to install the entire d3 package to fix the error?

EDIT: never mind, all of D3 is installed anyway, based on what I see in node_modules. I changed my version to ^4.13.10 and it fixed the issue.

[vankeer]

I don't think this issue is really "fixed" because it still occurs on version 13.

[allensutton]

I don't think this issue is really "fixed" because it still occurs on version 13.

My apologies - for some reason I was thinking I had only changed the D3 version and totally forgot I had to change the ngx-charts version too. Reopened.

[TeodorKolev]

Is there any version, which is actually working? This issue makes plugin unusable.. Will it be fixed, or I should change to another plugin?

[allensutton]

Is there any version, which is actually working? This issue makes plugin unusable.. Will it be fixed, or I should change to another plugin?

^12.0.1 works if you use the ^4.13.0 version of d3.

[rishikeshjadhav]

I am facing the same issue with 13.0.2 version and Angular 8.

Any idea when can we get this working with latest version?

[mbalsam-refind]

Angular 7 + Version 12.0.1 worked if you added these lines to package.json devDependencies

"d3": "^4.10.2",
"d3-array": "^1.2.1",
"d3-brush": "^1.0.4",
"d3-color": "^1.0.3",
"d3-force": "^1.1.0",
"d3-format": "^1.2.0",
"d3-hierarchy": "^1.1.5",
"d3-interpolate": "^1.1.5",
"d3-scale": "^1.0.6",
"d3-selection": "^1.1.0",
"d3-shape": "^1.2.0",
"d3-time-format": "^2.1.0"

The problem with TypeError: Object(…) is not a function is also fixed in with this combination.

https://stackoverflow.com/questions/50407259/ngx-chart-error-typeerror-object-is-not-a-function

[infornite]

Is there a working version that people can use. Unless I am missing something this makes the whole package unusable? I would expect it to be getting more attention. Is there some workaround that I can use. I am able to run locally but it fails when deployed to Heroku

[infornite]

Angular 7 + Version 12.0.1 worked if you added these lines to package.json devDependencies

"d3": "^4.10.2",
"d3-array": "^1.2.1",
"d3-brush": "^1.0.4",
"d3-color": "^1.0.3",
"d3-force": "^1.1.0",
"d3-format": "^1.2.0",
"d3-hierarchy": "^1.1.5",
"d3-interpolate": "^1.1.5",
"d3-scale": "^1.0.6",
"d3-selection": "^1.1.0",
"d3-shape": "^1.2.0",
"d3-time-format": "^2.1.0"

The problem with TypeError: Object(…) is not a function is also fixed in with this combination.

https://stackoverflow.com/questions/50407259/ngx-chart-error-typeerror-object-is-not-a-function

This did not work for me

[mbalsam-refind]

Depending on the version that you're using, you might need to add-in some dependencies in your packages.json. Once i did that everything started working.

[mbalsam-refind]

I'm no expert, but i'll try to help you. What error did you get? What version of angular are you using?

[msalmankarim]

Any update on this bug?

[saghishiri]

Same issue, Any update?

[ghost]

Same issue on latest versions"d3": "^5.15.0", "@swimlane/ngx-charts": "^13.0.2",
Any update?

[Diegovictorbr]

I did as @mbalsam-refind suggested and it works. Change ngx-charts to version ^12.0.1 and add this to devDependencies inside package.json:

"d3": "^4.10.2",
"d3-array": "^1.2.1",
"d3-brush": "^1.0.4",
"d3-color": "^1.0.3",
"d3-force": "^1.1.0",
"d3-format": "^1.2.0",
"d3-hierarchy": "^1.1.5",
"d3-interpolate": "^1.1.5",
"d3-scale": "^1.0.6",
"d3-selection": "^1.1.0",
"d3-shape": "^1.2.0",
"d3-time-format": "^2.1.0"

[jtg-pics]

Same issue, preventing production build.

[georgybu]

I use "@swimlane/ngx-graph": "7.0.0"
But @swimlane/[email protected] was installed automatically.

yarn why @swimlane/ngx-charts
yarn why v1.17.3
=> Found "@swimlane/[email protected]"
info Reasons this module exists
   - "@swimlane#ngx-graph" depends on it
   - Hoisted from "@swimlane#ngx-graph#@swimlane#ngx-charts"
Done in 0.96s.

When I trying to build my Angular project - I got an error

ERROR in ./node_modules/@swimlane/ngx-charts/fesm2015/swimlane-ngx-charts.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined

[georgybu]

Downgrade to "@swimlane/ngx-graph": "6.2.0" resolve this issue

[MohamedFarid648]

I downgraded it to 12.0.1
"@swimlane/ngx-charts": "^12.0.1",

then clear cache :
npm cache clean --force

then install it again :
npm install --save
or npm install swimlane/[email protected]

[jziggas]

I am having this issue with version 16.0.0, installing d3 dependencies and running npm cache clean as suggested in other threads did not seem to help.

[wensjuma]

Which version of angular are you using ? in my case im using v16.0.0 on angular 8.3.25 and i have no issues