search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.28k stars 1.15k forks source link

Module build failed: TypeError: Cannot read property 'kind' of undefined #1344

Open allensutton opened 4 years ago

allensutton commented 4 years ago

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 ngx-charts-error

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 commented 4 years ago

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 commented 4 years ago

Same issue, i had to use the 12.0.1 version

Hanmant-Patil commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

allensutton commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

msalmankarim commented 4 years ago

Any update on this bug?

saghishiri commented 4 years ago

Same issue, Any update?

ghost commented 4 years ago

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

Diegovictorbr commented 4 years ago

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 commented 4 years ago

Same issue, preventing production build.

georgybu commented 4 years ago

I use "@swimlane/ngx-graph": "7.0.0" But @swimlane/ngx-charts@13.0.2 was installed automatically.

yarn why @swimlane/ngx-charts
yarn why v1.17.3
=> Found "@swimlane/ngx-charts@13.0.2"
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 commented 4 years ago

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

MohamedFarid648 commented 4 years ago

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/ngx-charts@12.0.1

jziggas commented 3 years ago

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 commented 3 years ago

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