Error webpack and Ionic 3 with lazy loaded pages
See original GitHub issueI’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:
- Created 6 years ago
- Comments:15
Top GitHub Comments
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.
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.