Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack - Loading chunk 0 failed

Some of my users are getting this error:

Unhandled rejection message: 'Loading chunk 0 failed' stack: Loading chunk 0 failed at HTMLScriptElement.n

The problem is, I've no success in reproducing it. and I've this error for some time now.

It occurs to the same users, every time they enter the website. but only to some of them. Yet, all of them are using Win7 + Chrome 60, so it's not related to the browser.

I could not find anything on the web regard this specific error. In addition I'm not using react-router, I do use react.

Any ideas what else could be wrong?

Could it be caused by something related to some security?

I'm using webpack 2.6.1 and CommonsChunkPlugin to create chunk for my vendors.

The user agent of one of the users getting the error :

Mozilla/5.0 (Windo­ws NT 6.1; Win64; x6­4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

like image 812
jony89 Avatar asked Sep 05 '17 09:09

jony89


People also ask

How do I fix loading chunk failed?

If you are encountering this error as a user of an application, the simplest way to resolve it is to clear your browser cache (and also restart it for good measure) and try again. If the error was because your browser had cached older files, this should fix the issue.

What are chunk JS files?

chunk. js files are for third-party libraries like the react , axios , and formik library code that is imported to the application. Code splitting technique will also create a chunk. js file, so you need to check the file and see if the chunk is for node_modules code or your application code. There's also one chunk.

What is Vendors main chunk JS in react?

chunk. js represents all the libraries used in our application. It's essentially all the vendor codes imported from the node_modules folder. Main.


2 Answers

The reason for this is because I used require.ensure with webpack which creates chunks and using jsonp to add this script on demand, in other words, It's adding script src tag to the html with the created chunk file.

It seems that some users have extensions or even some configuration to block such jsonp requests regardless whether it's the same domain or not.

One solution is not using require.ensure at all obviously, or using the error callback to handle this scenario.

In addition was looking for a way that webpack will load the script using xhr + eval, which will prevent such scenarios. I just found this npm module: https://github.com/elliottsj/xhr-eval-chunk-webpack-plugin, yet I expected it to be more supported by webpack itself.

I've opened an issue for this : https://github.com/webpack/webpack/issues/5630, hopefully to see some progress.

like image 91
jony89 Avatar answered Sep 21 '22 21:09

jony89


Answer for search from google:

In my case Error: Loading chunk 9 failed. fired only in Firefox. Caused by positive lookbehind regexp. (?<=...)

Note that this feature is not yet supported on all browsers; use at your own discretion!

like image 39
Альбэр Местовый Avatar answered Sep 19 '22 21:09

Альбэр Местовый