Have you tried clearing your cache ?

From the Error message, it seems like your server is returning a html file response to your 4.*.chunk.js request, most likely it is returning index.html which starts with a < token that causes the SyntaxError.

With react-router the routing is done on the client so the server is configured to serve the index.html file to every request, except for the static assets, then react-router can do its job.

For some reason the 4.*.chunk.js is not found in the static assets and index.html gets returned.

I have this issue also when I deploy new version
Root cause: the index.html is cached => it points to old js files
Solution: do not allow browser cache index.html by configure your nginx/apache/express
add this header cache-control: no-cache; to index.html response

@nhducit I tried your suggestion but the ServiceWorker caches index.html (and main.*.js) regardless of the server headers so there were still requests for chunks that had been replaced by a more recent deploy.

I've implemented this as a solution instead: https://zach.codes/handling-client-side-app-updates-with-service-workers/

Pointing out an observation. I found that app.get('*') always serves index.html. This is the root cause of this bug. Like when a resource is not found or somehow the build is broken even, this issue can come over. I guess the exact requested file being served will help? And what about serving sw.js in case when an asset is not found there?

Please have a look at this related issue. Our development server serves sw.js with Cache-Control: public, max-age=0 header instead of Cache-Control: no-store. Any ideas on how to serve it with the right header?

Not sure but you may want to simply not serve the offline plugin in development. I have this at the bottom of app.js:

if (process.env.NODE_ENV === 'production') {
  const OfflinePluginRuntime = require('offline-plugin/runtime'); // eslint-disable-line global-require
  OfflinePluginRuntime.install({
    // Tells to new SW to take control immediately
    onUpdateReady: () => OfflinePluginRuntime.applyUpdate(),
    // Tells the UpdateLink component to reload into the new version
    onUpdated: () => {
      window.swUpdate = true;
    },
  });
}

As for production, I use Firebase hosting so I only needed to add this to my firebase.json:

"headers": [
      {
        "source" : "/sw.js",
        "headers" : [
          {
            "key" : "Cache-Control",
            "value" : "no-store"
          }
        ]
      }
    ]

@yantakus how do you run it in development servers? as npm start ? In that case offline-plugin never gets initiated i suppose. If you are using npm run start:production, then the offline plugin is at use. The cache headers can be set manually using nginx as it is given in the .nginx.conf file. I also believe max-age=0 is the default behaviour of Express server.

@julienben Never wrap runtime initialization in a condition as stated here, in this case your events won't get fired. It won't be installed in development anyway, because it is generated by webpack only in production. I experimented myself and I didn't get the events fired when I had plugin installation inside condition.
The only tiny issue you will get is a warning in console in development, but it is absolutely OK as stated here.

@varghesethomase by development server I meant npm run start:production, sorry for being unclear. I have to make it work locally to test this excellent idea. I want to tweak it a bit and testing it right in production is a bad idea.
If we serve all the files with express.js, what does nginx has to do with it?

@yantakus Thanks for the tips! Strange given that the condition should always be true in production but I'll assume it's just webpack magic. Also, note that it's present in app.js of the boilerplate's demo app.

Btw, the custom Link component has worked very well for me. One caveat though: I was forced to change the authentication routes. As a consequence, users with cached versions of the app would be trying to login through an invalid route until they manually updated the SW. It happened before the app went public but might have been a serious problem if not.

Back to the original issue. Me and my team realized why this happens: when you build a new version, new chunks are generated and the old ones are deleted. But the index.html file is not refreshed and it still links to the old chunks which are not there anymore. Because all the non-asset URLs are rewritten to index.html, server responds with 404 page instead of the missing chunks. Unexpected token < is the first character in any html page. Have a look at my SO answer on how to resolve this problem.

@yantakus This is pretty much the solution I used. Also I found out my teammates were still reflexively using Link so I wrote a tiny ESLint rule to protect from that.

I got Unexpected token < with in promise .... and fixed with me with installing the latest webpack, and webpack-dev-server , and also service worker should be there. This is my sample https://github.com/engmyahya/ReactJS.Web

Closing due to inactivity

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.