react-boilerplate: Uncaught SyntaxError: Unexpected token <

React Boilerplate

Before opening a new issue, please take a moment to review our community guidelines to make the contribution process easy and effective for everyone involved.

Please direct redux-saga related questions to stack overflow: http://stackoverflow.com/questions/tagged/redux-saga

For questions related to the boilerplate itself, you can also find answers on our gitter chat: https://gitter.im/mxstbr/react-boilerplate

Before opening a new issue, you may find an answer in already closed issues: https://github.com/react-boilerplate/react-boilerplate/issues?q=is%3Aissue+is%3Aclosed

Uncaught SyntaxError: Unexpected token <

Description

I don’t know whats causing this issue, but it seems to be breaking a route i’ve been working on, on prod. My localhost is perfectly fine, i don’t even know where to begin to debug this. Please help.

These are the following errors i’m getting from the console log.

Uncaught SyntaxError: Unexpected token <
Dynamic page loading failed Error: Loading chunk 4 failed. at HTMLScriptElement.c
Uncaught (in promise) Error: Loading chunk 4 failed. at HTMLScriptElement.c

Looking at this error a bit closer, i saw that it fails when load chunck 4, so i don’t know what the issue is, granted my localhost is fine. i’m using react-boilerplate

(Add images if possible) screen shot 2017-03-30 at 11 48 15 am

Versions

Version : 3.0.0 node : >=7.1.0 npm : >=3

React-Boilerplate (see package.json):
Node/NPM:
Browser:

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 7
Comments: 17 (9 by maintainers)

Most upvoted comments

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"
          }
        ]
      }
    ]

julienben on Aug 8, 2017

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 on May 16, 2017

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 on Aug 14, 2017

@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.

julienben on Aug 15, 2017