Uncaught SyntaxError: Unexpected token '<' and ChunkLoadError: Loading chunk 16 failed

Question

. 。 Answers to this question are eligible for a +150 reputation bounty. WhiteHox is looking for a . 。

So i have a react app (set up using create-react-app) but any time I push to netlify and there is a new build, I get these errors

Uncaught SyntaxError: Unexpected token '<' 16.0fcd6807.chunk.js:1

And directly under this is this error

ChunkLoadError: Loading chunk 16 failed. react_devtools_backend.js:2560 ChunkLoadError: Loading chunk 16 (missing: http://localhost:3000/static/js/16.0fcd6807.chunk.js)

I have try all solutions possible online like setting homepage to "homepage" : "." in package.json, setting base in index.html with , and other solutions on SO and online as a whole. I am currently on react version 17.0.2 and react-scripts 4.0.3.

Everything I have tried seems to still not fix this issue. What could be the problem and How could I solve this. Thanks

Answer 1

Look at this question here.

Practically, your users try to load a minified js chunk that is not available anymore (since you released a new version).

You can define a simple Error Boundary handler, like Prakash suggested, also described in the official React documentation.

Where you return the new state in the getDerivedStateFromError method, you can attach a flag that detects if the error is indeed a chunk load fail:

   static getDerivedStateFromError(error) {

        return {
            hasError: true,
            chunkError: /Loading( CSS)? chunk [\d]+ failed/.test('Loading chunk 8 failed'),
        };
    }

Then, once your state holds the flag, you can programmatically reload the page instead of showing an error page in your render method:

render() {
        if (this.state.chunkError) {
            window.location.reload();
        } else if (this.state.hasError) {
            return <h1>Something went wrong.</h1>;
        }
        return this.props.children;
}

Finally, you wrap your whole App (in index.js) with this ErrorBoundary component:

<ErrorBoundary>
    <App />
</ErrorBoundary>