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

Question

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

Yes. I use metlife, so continuous deployment is setup automatically @PrakashS — codebarz, Jul 19 '21 at 13:24
So when a new build.is deployed the error can happen. May be you can catch the chunk loading error using a error boundary and reload the page. — Prakash S, Jul 19 '21 at 13:52
Did you try to deploy it to another service like heroku or firebase ? To see if problem keep occurs. And did you try to open your index.html locally after build ? Is your app working without error this way ? — Nezih, Jul 21 '21 at 14:44
Would try to deploy to heroku and see if the issue persist. App works locally — codebarz, Jul 21 '21 at 14:46
The invalid token is the "<" of an `` tag, seems like the server responds with a 404 rendered page — Mordechai, Jul 21 '21 at 16:41
I would say it's a cache issue, isn't it? force a cache clear after the deploy, it should fix that — JoelBonetR, Jul 26 '21 at 11:58

score 0 · Answer 1 · answered Jul 21 '21 at 15:34

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>

Thanks a lot for your suggestions but what if the user is in the middle of something important, say a transaction for example. — codebarz, Jul 21 '21 at 18:52
This is a different problem and has to do with the deployment process rather than react. The way webpack compiles your production build, it is expected that the js/css chunks will be available on your webserver. When you deploy, you either need to keep the previous version's chunks live alongside the new version for any 'live' users, or drain your nodes before you deploy. — tkounenis, Jul 22 '21 at 08:09

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

1 Answers1