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

Support
,
1

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

2

Welcome to the Forums @codebarz

Do you have repo you could share so that others might test?

3

Thank you for your prompt response. Unfortunately, this is a private project and source code can not be shared.

4

I think you’re somehow publishing a development build. Reasons for me to think that:

and

These indicate a development environment.

5

The localhost is a placeholder for the domain. But for the devtools are you saying are should set NODE_ENV on netlify to production?

6

You mean, you replaced your domain name with localhost while posting? if yes, did you also add :3000 yourself?

I’m not sure. I just assumed a Devtools script should probably not exist in a production build. So, it might be a development build. But yes, your NODE_ENV should always be set to production while building on Netlify.

7

Yes, I added 3000 myself

8

Hi there, @codebarz :wave:

Thanks for your patience. Have you made any progress on this in the past three days?

I suggest taking a look at this Support Guide and the comment below it, as there are some suggestions for why this may be happening: [Support Guide] Why do I see “Uncaught SyntaxError: Unexpected token <” errors? How can I use chunking or versioning for my assets at Netlify?

If following those suggestions doesn’t work, please share your Netlify site name and any further information you can share publicly so that we can look into it further. Without further details it will be hard for our team to continue digging. Thanks for understanding!

9

So @coelmay @hillary and all, I was able to fix this using a service worker. I installed a service worker on the browser that caches all my files and then updates the stored files if It sees any changes using the code below

self.addEventListener("activate", function (event) {
  event.waitUntil(
    this.caches.keys().then(function (cacheNames) {
      return Promise.all(
        cacheNames
          .filter(function (cacheName) {
            return true;
          })
          .map(function (cacheName) {
            return caches.delete(cacheName);
          })
      );
    })
  );
});

Without the above snippet, the app won’t crash but the cached files are not updated so you won’t see any changes.

So basically, the solution was to install a service worker and the activate a new service workers anytime there is a change.

1 Like
10

Hey there, @codebarz :wave:

Thanks for coming back and following up on this thread. It is great to hear you found a solution that worked! Knowledge sharing is one of the things that makes the Netlify Forums a great place to collaborate, and I know that your solution will be useful to other folks who encounter a similar situation.

:netliconfetti: