pwa: "Uncaught SyntaxError: Unexpected token <" when refreshing page

Whenever I do a normal refresh, i get these error messages:

manifest.48cbf0211cc2b417df60.js:1    Uncaught SyntaxError: Unexpected token <
vendor.e73f0cf5e42d1a1bdeee.js:1    Uncaught SyntaxError: Unexpected token <
app.d644989e00d1de883ada.js:1    Uncaught SyntaxError: Unexpected token <

When looking in the Network tab, it´s like the entire HTML document (index.html) is being returned instead of the js file. https://imgur.com/a/6AR5P

I’m assuming this has to do with the src to the js-files are returning 404. Question is why though?

If I hit hard refresh (Ctrl + F5), the site loads fine.

Does anyone have any clues?

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 21
Comments: 31

Most upvoted comments

See this guys https://github.com/webpack/webpack/issues/2882#issuecomment-280906981

You just need to add <base href="/" /> into the <head> of your index.html. This resolved my problem. It may help you too.

Thanks

+179

jainshravan123 on Aug 9, 2021

I get the same issue but not on every refresh, only sometimes after I deploy the app.

From what I understand, the first time I open the app it tries to load a JS files from the previous version (e.g. chunk-9a00505e.02e15df7.js), which doesn’t exist anymore, and which serves a 404 HTML page (that obviously starts with <).

A refresh fixes this, except on progressive web apps on Safari because there is no reload button nor a “swipe down to refresh” action. It’s very frustrating for users, as well as for me who asks them to restart their phones.

Has anyone been in the same situation?

+12

Dinduks on Feb 25, 2020

Try adding <base href="/" /> into the <head> in your index.html This worked for me .

JPilson on Sep 21, 2020

See this guys webpack/webpack#2882 (comment)

You just need to add <base href="/" /> into the <head> of my index.html. This resolved my problem. It may help you too.

Thanks

Man this has saved my life. For my situation, I deploy my react client on express as the documentation of create-react-app said. Everything works fine, except when I refreshing a page whose URL contains a param. I’ve searched for a whole day. This is the only way which solved my problem perfectly for now. Hope it will help you guys, too.

Sonequa on Mar 20, 2020

Okey guys! I’ve just verified that this is not actually a bug in the PWA template, but instead was related to the changes that we had made.

Since we were not creating a dist/index.html, the sw-precache-webpack-plugin could not pick up on changes, so it’s “cache id” was the same. In service-worker.js:

var precacheConfig = [
    ['index.html', '91b2a317a09b223bf5a5582a5930069c'],
    ['static/css/app.3136db4aece9d70bd7458ade08e813c8.css', 'e685314d1221643e09338010621d36b5'],
    ['static/js/app.5a5b57a7c4b45cfcb1d8.js', '6045c0a02a2c055cefdb6d9d9e4574c7'],
    ['static/js/manifest.f52ceabe5f48b3ce1af2.js', 'fc67123c2142aea9e2dccf03ba3dbc5b'],
    ['static/js/vendor.85a0bf6fdf1309909410.js', 'e8f4ecbec293643c5f4b7b93744a4264']
  ],

Once we added back the creation of index.html, the hash/id updated correctly.

MikaelEdebro on Mar 6, 2018

I am having issues with this too. On every page refresh, the page gives this error. After a hard page refresh (ctrl + F5), it is fixed. Does someone know how to fix this?

KaleRakker on Feb 22, 2020

Uncaught SyntaxError: Unexpected token < means server already send index.html file to chrome, but server can’t find your frontend static path.

app.use(express.static(path.join(__dirname, 'public/'))))

server use static path, solve problem.

akerdi on May 9, 2019

app.use(express.static(path.join(__dirname, ‘dist/<your project name here>’)));

nathanchikku on Aug 30, 2018

I get the same issue but not on every refresh, only sometimes after I deploy the app. From what I understand, the first time I open the app it tries to load a JS files from the previous version (e.g. chunk-9a00505e.02e15df7.js), which doesn’t exist anymore, and which serves a 404 HTML page (that obviously starts with <). A refresh fixes this, except on progressive web apps on Safari because there is no reload button nor a “swipe down to refresh” action. It’s very frustrating for users, as well as for me who asks them to restart their phones. Has anyone been in the same situation?

@Dinduks You probably caches the index.html without the js files.

So, when you build (deploy) app the js files changes (sometimes). But index.html is loaded from cache and has references to old js files.

Error occurs sometimes because hash in the js files that you mentioned changes only when dependencies in package.json changes.

A quick solution for this is to edit your index.html file. I have added an attribute which i name it version in the meta tag and change its value in each deploy. For e.x: <meta version="1.0.1">. That causes a new index.html to be used without using the previous indexed one and solves the Unexpected token error.

kostaslamo on Jun 9, 2020

I get the same issue but not on every refresh, only sometimes after I deploy the app.

From what I understand, the first time I open the app it tries to load a JS files from the previous version (e.g. chunk-9a00505e.02e15df7.js), which doesn’t exist anymore, and which serves a 404 HTML page (that obviously starts with <).

A refresh fixes this, except on progressive web apps on Safari because there is no reload button nor a “swipe down to refresh” action. It’s very frustrating for users, as well as for me who asks them to restart their phones.

Has anyone been in the same situation?

@Dinduks You probably caches the index.html without the js files.

So, when you build (deploy) app the js files changes (sometimes). But index.html is loaded from cache and has references to old js files.

Error occurs sometimes because hash in the js files that you mentioned changes only when dependencies in package.json changes.

zawadsoon on May 25, 2020

app.use(express.static(path.join(__dirname, ‘dist/todos’)));

after dist you should write the project name

nathanchikku on Aug 30, 2018