Uncaught (in promise): Error: Loading chunk 20 failed


#1

Hi
I hope somebody can help me with my problem.
I have an ionic app which works great most of the times, but on IOS it gives a white screen 1 out of 30 times. I have changed the errorhandling so it sends the error to an external service. But I do not have a clue what’s wrong. This error occurs on IOS only.

Here is the error message:

Uncaught (in promise): Error: Loading chunk 20 failed. onScriptComplete
@http://localhost:8080/var/containers/Bundle/Application/28E1D3D9-A9F6-4F4C-AF6F-51C5E13D3741/Pet%20Store.app/www/build/vendor.js:1:701 H
@http://localhost:8080/var/containers/Bundle/Application/28E1D3D9-A9F6-4F4C-AF6F-51C5E13D3741/Pet%20Store.app/www/build/polyfills.js:3:23955 onInvokeTask
@http://localhost:8080/var/containers/Bundle/Application/28E1D3D9-A9F6-4F4C-AF6F-51C5E13D3741/Pet%20Store.app/www/build/vendor.js:1:112908 runTask
@http://localhost:8080/var/containers/Bundle/Application/28E1D3D9-A9F6-4F4C-AF6F-51C5E13D3741/Pet%20Store.app/www/build/polyfills.js:3:10844 invokeTask
@http://localhost:8080/var/containers/Bundle/Application/28E1D3D9-A9F6-4F4C-AF6F-51C5E13D3741/Pet%20Store.app/www/build/polyfills.js:3:16801 p
@http://localhost:8080/var/containers/Bundle/Application/28E1D3D9-A9F6-4F4C-AF6F-51C5E13D3741/Pet%20Store.app/www/build/polyfills.js:2:27654 v
@http://localhost:8080/var/containers/Bundle/Application/28E1D3D9-A9F6-4F4C-AF6F-51C5E13D3741/Pet%20Store.app/www/build/polyfills.js:2:27894

#2

This error will usually come only when the ionic serve has been stopped.


#3

It happens on the device.


#4

What do you think ?

it’s not a problem or NOT ?


#5

Bump. I have the same error. It only happens on iOS devices and only for really small amount of users


#6

I do not have a clue on how to find the error. I have tried adding a error monitoring tool (sentry.io) without any luck. All tips on how to solve this bug is highly appreciated.
Thanks in advance


#7

Yes it is a problem for my app. Sometimes the app is just “spinning” on the splashscreen


#8

Are there anyone who can help me with this problem?


#9

I’m encountering the same ‘Loading chunk failed’ error.

Always on iPhone devices.

Always on chunk 30, which is my root module loading on app ready.

Original Stacktrace

Uncaught (in promise): Error: Loading chunk 30 failed.
onScriptComplete@http://localhost:8080/var/mobile/Containers/Data/Application/B87855FF-EEF6-43B6-BD81-BB1A0A3C1B44/Library/Application%20Support/1d7fd7f9-a119-44eb-a280-f82bc3d3ee71/build/vendor.js:104:33
H@http://localhost:8080/var/mobile/Containers/Data/Application/B87855FF-EEF6-43B6-BD81-BB1A0A3C1B44/Library/Application%20Support/1d7fd7f9-a119-44eb-a280-f82bc3d3ee71/build/polyfills.js:3:23955
onInvokeTask@http://localhost:8080/var/mobile/Containers/Data/Application/B87855FF-EEF6-43B6-BD81-BB1A0A3C1B44/Library/Application%20Support/1d7fd7f9-a119-44eb-a280-f82bc3d3ee71/build/vendor.js:4974:43
runTask@http://localhost:8080/var/mobile/Containers/Data/Application/B87855FF-EEF6-43B6-BD81-BB1A0A3C1B44/Library/Application%20Support/1d7fd7f9-a119-44eb-a280-f82bc3d3ee71/build/polyfills.js:3:10844
invokeTask@http://localhost:8080/var/mobile/Containers/Data/Application/B87855FF-EEF6-43B6-BD81-BB1A0A3C1B44/Library/Application%20Support/1d7fd7f9-a119-44eb-a280-f82bc3d3ee71/build/polyfills.js:3:16801
p@http://localhost:8080/var/mobile/Containers/Data/Application/B87855FF-EEF6-43B6-BD81-BB1A0A3C1B44/Library/Application%20Support/1d7fd7f9-a119-44eb-a280-f82bc3d3ee71/build/polyfills.js:2:27654
v@http://localhost:8080/var/mobile/Containers/Data/Application/B87855FF-EEF6-43B6-BD81-BB1A0A3C1B44/Library/Application%20Support/1d7fd7f9-a119-44eb-a280-f82bc3d3ee71/build/polyfills.js:2:27894
at c (polyfills.js:3:19761)
at ? (polyfills.js:3:19175)
at _fireError (vendor.js:67770:22)
at _failed (vendor.js:67763:24)
at onInvoke (vendor.js:4983:39)
at run (polyfills.js:3:10149)
at ? (polyfills.js:3:20245)
at onInvokeTask (vendor.js:4974:43)
at runTask (polyfills.js:3:10844)
at o (polyfills.js:3:7901)
at invokeTask (polyfills.js:3:16824)
at p (polyfills.js:2:27654)
at v (polyfills.js:2:27894)

#11

Did you find a solution for this?


#12

I’m getting the exact same issue. Only for iOS and I was not able to reproduce it via XCode / TestFlight.

I’m not sure at all but could it be related to a bad internet connection when opening the app?


#13

Maybe we can compare our package.json file?

If you can post (or DM me) your package.json dependencies (and devDependencies). Then I can compare them and maybe we have a common lib that is causing this problem.


#14

Of course. This is my package.json file

{
  ...
  "dependencies": {
    "@angular/animations": "5.0.0",
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/compiler-cli": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@ionic-native/call-number": "3.14.0",
    "@ionic-native/core": "3.6.0",
    "@ionic-native/email-composer": "3.14.0",
    "@ionic-native/file": "3.14.0",
    "@ionic-native/firebase": "3.14.0",
    "@ionic-native/in-app-browser": "3.14.0",
    "@ionic-native/keyboard": "3.14.0",
    "@ionic-native/market": "3.14.0",
    "@ionic-native/mixpanel": "3.14.0",
    "@ionic-native/network": "3.14.0",
    "@ionic-native/social-sharing": "3.14.0",
    "@ionic-native/splash-screen": "3.14.0",
    "@ionic-native/sqlite": "3.14.0",
    "@ionic-native/status-bar": "3.14.0",
    "@ionic-native/transfer": "3.14.0",
    "@ionic/storage": "2.1.3",
    "@ngx-translate/core": "8.0.0",
    "@ngx-translate/http-loader": "2.0.0",
    "android-versions": "^1.3.0",
    "call-number": "^1.0.1",
    "cordova-android": "6.3.0",
    "cordova-google-api-version": "0.0.1",
    "cordova-ios": "4.5.4",
    "cordova-plugin-appsee": "^2.3.65",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-dialogs": "2.0.1",
    "cordova-plugin-email-composer": "^0.8.15",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-firebase": "^0.1.24",
    "cordova-plugin-ionic-keyboard": "^2.1.0",
    "cordova-plugin-ionic-webview": "^1.2.1",
    "cordova-plugin-market": "^1.2.0",
    "cordova-plugin-mixpanel": "^4.2.0",
    "cordova-plugin-network-information": "^1.3.4",
    "cordova-plugin-splashscreen": "^4.1.0",
    "cordova-plugin-statusbar": "^2.4.1",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "^5.3.2",
    "cordova-plugin-zip": "3.1.0",
    "cordova-sqlite-storage": "~2.2.1",
    "es6-promise-plugin": "^4.2.2",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "moment": "2.18.1",
    "mx.ferreyra.callnumber": "~0.0.2",
    "raygun4js": "^2.9.4",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.0",
    "typescript": "2.4.2",
    "ws": "3.3.2",
    "ajv": "6.0.0"
  },
  ...
}

#15

Thanks these are the common libs:

"@angular/animations": "5.0.0",
"@angular/common": "5.0.0",
"@angular/compiler": "5.0.0",
"@angular/compiler-cli": "5.0.0",
"@angular/core": "5.0.0",
"@angular/forms": "5.0.0",
"@angular/http": "5.0.0",
"@angular/platform-browser": "5.0.0",
"@angular/platform-browser-dynamic": "5.0.0",
"@ionic-native/core": "3.6.0",
"@ionic-native/file": "3.14.0",
"@ionic-native/in-app-browser": "3.14.0",
"@ionic-native/network": "3.14.0",
"@ionic-native/splash-screen": "3.14.0",
"@ionic-native/sqlite": "3.14.0",
"@ionic-native/status-bar": "3.14.0",
"@ionic/app-scripts": "3.1.0",
"@ionic/storage": "2.1.3",
"android-versions": "^1.3.0",
"cordova-android": "6.3.0",
"cordova-ios": "4.5.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-ionic-webview": "^1.2.1",
"cordova-plugin-network-information": "^1.3.4",
"cordova-plugin-splashscreen": "^4.1.0",
"cordova-plugin-statusbar": "^2.4.1",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-sqlite-storage": "~2.2.1",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"moment": "2.18.1",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"typescript": "2.4.2",
"zone.js": "0.8.18"

Nothing special here. Maybe we should have a look at the common cordova plugins. Search the git repo for issues. (cordova-sqlite-storage, cordova-plugin-network-information, cordova-plugin-file-transfer)

Please let me know if you find a solution


#16

Yep that’s probably a common things, time to time I could see such errors reported in Sentry from production too, like

Uncaught (in promise): Error: Loading chunk 34 failed

which according stacktrace comes from vendors.js followed by polyfills.js

so far I didn’t found a proper solution. one improvement was to move the initialization of ngx-translate from the constructor to ngOnInit but it still happens time to time


#17

Well I do not user ngx-translate in my project (se the common list). Maybe you can also se if you have some of the same dependencies that I and @sebaferreras1h have. It might help us to scope down where to look.


#18

To be honest, if I would have to bet, I would not bet on a dependency problem. Kind of have the feeling that for a weird reason sometimes the vendor.js is not properly load by cordova…but like I said only if I would have to bet

I checked the only error I still have I see following log in Sentry

ERROR Error: Uncaught (in promise): Error: Loading chunk 34 failed.
...www/build/vendor.js:1:561

If I decompile my .ipa file to access the vendor.js I found following code at line 561

0!==e&&(e&&e[1](new Error("Loading chunk "+t+" failed."))

I then search this error in my all node_modules and found the reference in webpack respectively in JsonpMainTemplateplugin.js

 "function onScriptComplete() {",
			this.indent([
				"// avoid mem leaks in IE.",
				"script.onerror = script.onload = null;",
				"clearTimeout(timeout);",
				"var chunk = installedChunks[chunkId];",
				"if(chunk !== 0) {",
				this.indent([
					"if(chunk) {",
					this.indent("chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));"),
					"}",
					"installedChunks[chunkId] = undefined;"
				]),
				"}"
			]),
			"};",

what does that mean? no idea :joy:


#19

Maybe this question on Stackoverflow would make sense here?


#20

Another question did you start from a template or from scratch when building the application?


#21

In my case, completely from scratch. And you guys?