Error: Loading chunk [INT] failed.

[psr-ai]

Is this a bug report?

YES

Did you try recovering your dependencies?

YES

Steps to Reproduce

I find the bug only in a production environment.

Description

This is happening for me on the production environment in iOS, and I had tried the setting skipWaiting: false (thanks to #3613 (comment)). The solution worked in browsers with service workers enabled. For others, the problem is that if the build is updated on node server and browser has cached the chunk already, it will look for the chunk and if not found, it shows up the error. One solution I tried is to disable cache (https://stackoverflow.com/questions/49547/how-to-control-web-page-caching-across-all-browsers), but this isn't a long time solution.

I want to devise a way in which I can detect the existence of the chunk on the node server side:

1. If it exists: do nothing (will pick file from cache or for new browsers, it will take from network)
2. If it doesn't: check on node server if the client app and node server are on same version and hard reload the client app if versions don't match

The solution I tried was to have a version of app on client side and on node side, and send it with every request. I referred to this post https://stackoverflow.com/questions/23056808/detect-application-version-change-on-a-single-page-application. The problem I faced then was since react loadable and webpack handle the chunk loading and error handling themselves, I am unable to catch any manual error(with version number) if I throw from the node server on loading of chunk, so I am unable to compare it. Is there a way I can manually catch the error in the webpack require ensure function (which is called while loading the script) so that I can check the version number between client and node server and subsequently update the app? If not, what is the way I can send the version number with script loading and compare the versions on the node server and hard refresh the client app if versions don't match?

[nhanvu327]

Hi @raiprabh , here is my solution, I don't need to compare the version between client and server. I just simply hard reload if there is any error occurs during process of loading chunk. In Loading component, you will receive a error props, you can check that and execute location.reload(true). Hope this can help!
More info with error props: https://hackernoon.com/effective-code-splitting-in-react-a-practical-guide-2195359d5d49

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 7 days if no further activity occurs.