question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error webpack and Ionic 3 with lazy loaded pages

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:15

github_iconTop GitHub Comments

5reactions
houpacommented, Nov 3, 2018

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 <script> tags of index.html, so the browser will be forced to search to the new version of the file in the same file. After this, you have to open the vendor.js and search to the string “.js”, that is the concat of the build javascript files will be lazy loaded, and replace this “.js” to “.js?v=1.0.31” (or any string different from old one), so the browser will search for the new file of lazy loaded javascript files too. I hope this helps.

2reactions
ghostcommented, Dec 18, 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Lazy load of page in separate module says: "Uncaught (in ...
I've created a blank project using the blank template with ionic v2.2.3; I'm creating a practice app that has a slider menu and...
Read more >
Developers - Error webpack and Ionic 3 with lazy loaded pages -
When using the library and loading the ionic app in a browser, I get the following error when navigating to a lazy loaded...
Read more >
Ionic V3 Lazy Loading: Not Working. All js chunks loaded
I have absolutely no idea why this is happening but every single one of my lazy loaded ionic page loads ALL *.js chunks...
Read more >
Lazy loading with Ionic 3 - Mastering Ionic
Ability to lazy load page components and pipes; Use of Semver versioning for framework releases. Unlike the leap from Ionic 1 to Ionic...
Read more >
Ionic 3 New Pages Lazy Loading - JavascriptTuts
Page Lazy Loading is awesome. I never start a tuts like this, but f*** yea! This new feature from Ionic 3 not only...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found