Skip to content

Error: Loading chunk [INT] failed. #4152

@psr-ai

Description

@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?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions