Ngx-charts: Error webpack and Ionic 3 with lazy loaded pages

Created on 4 Oct 2017 · 15Comments · Source: swimlane/ngx-charts

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
When using the library and loading the ionic app in a browser, I get the following error when navigating to a lazy loaded page:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (bootstrap 5deba61787c2e6e288ca:54)
    at src lazy:56
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.es5.js:3890)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.es5.js:3881)
    at t.invokeTask (polyfills.js:3)
    at __webpack_require__ (bootstrap 5deba61787c2e6e288ca:54)
    at src lazy:56
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.es5.js:3890)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.es5.js:3881)
    at t.invokeTask (polyfills.js:3)
    at c (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at NavControllerBase._fireError (nav-controller-base.js:322)
    at NavControllerBase._failed (nav-controller-base.js:310)
    at nav-controller-base.js:365
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.es5.js:3890)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3

My app is working fine when not including and using the library, so I guess it somehow messes up the webpack require feature.

Reproduction of the problem
I have an Ionic app with lazy loaded pages. When the application starts, the first page is displayed, then if I try to move to another page I get the error above.

Also, I deploy the content of the www folder generated by Ionic on a bucket in S3 with static hosting. Everything works fine unless I use the library

Please tell us about your environment:

$ ionic info

cli packages:

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 6.5.0 

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.1.2 browser 4.1.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    Android SDK Tools : 26.1.1
    ios-deploy        : 1.9.1 
    Node              : v7.4.0
    npm               : 4.1.2 
    OS                : macOS Sierra
    Xcode             : Xcode 9.0 Build version 9A235

ngx-charts version: x.x.x
6.0.2

d3.js version: 4.9.1

Angular version:
4.4.3
Browser:
Chrome 61
Language:
TypeScript

Source

mebibou

Most helpful comment

I don't know if you already have resolved the issue, but i've found the reason and the solution.
Reason of this problem: when you update the scripts, the cached version in browser, doesn't have the same array size of the new one, so the new function is not there, this is why you have call of undefined. I realized that, after the "ionic cordova build browser" command, we can edit the output index.html inserting some string as version in end of file name of javascript files like "vendor.js?v=1.0.31" in

All 15 comments

Same here.
Did you have to downgrade Angular?

notyetspecified on 23 Oct 2017

@Ladeiras no, I had to load the module in the app.module.ts

mebibou on 23 Oct 2017

@mebibou oh, thanks!
Although I'm getting the same error when using the prod version (with minimized js). Did you have the same problem? I'm including the NgxChartsModule on the app.module.ts, is that what you did?

notyetspecified on 23 Oct 2017

@Ladeiras I'm not using prod version, too many things go wrong when I do!

mebibou on 23 Oct 2017

@mebibou Alright, thanks!

notyetspecified on 23 Oct 2017

@Ladeiras just tried to build with --prod, have this error:

Uncaught TypeError: Cannot read property 'call' of undefined
    at e (vendor.js:1)
    at Object../src/common/tooltip/injection.service.ts (vendor.js:1)
    at e (vendor.js:1)
    at Object../src/common/tooltip/tooltip.service.ts (vendor.js:1)
    at e (vendor.js:1)
    at Object../src/common/tooltip/tooltip.directive.ts (vendor.js:1)
    at e (vendor.js:1)
    at Object../src/common/tooltip/tooltip.module.ts (vendor.js:1)
    at e (vendor.js:1)
    at Object../src/common/tooltip/index.ts (vendor.js:1)

Same for you?

mebibou on 3 Nov 2017

@mebibou yes, same thing.
I'm currently building with --minifyjs --minifycss --aot, since the problem lies on --aot together with --optimizejs, which is probably what --prod does.

notyetspecified on 3 Nov 2017

Oh I found similar reports here as well

mebibou on 3 Nov 2017

Same here

ValterSantosMatos on 7 Nov 2017

Same here with 6.1.0 .....

yurik94 on 1 Dec 2017

I had the same issue on my PWA and solved it by the order we are calling / caching the vendor.js. vendor.js has to be called first before main.js on the index.html and in the same way we have to cache it on the service worker first before caching main.js. If main.js started referring the vendor.js before it loads we might get the above error.

ghost on 18 Dec 2017

👍2

Same problem here, still searching for a solution. I changed the order of the files I am caching, but still...

workbox.precaching.precacheAndRoute([
  {
    url:'./build/polyfills.js',
    //revision: 'aaaaaa'
  },
  {
    url:'./build/vendor.js',
    //revision: 'aaaaaa'
  },
  {
    url:'./build/main.js',
    //revision: 'aaaaac'
  },
  {
    url:'./build/main.css',
    //revision: 'aaaaab'
  },    
  {
    url:'index.html',
    //revision: 'aaaaaa'
  },
  {
    url:'manifest.json',
    //revision: 'aaaaaa'
  }  
]);