Heroku create-react-app deploy Uncaught SyntaxError: Unexpected token <

Question

Whenever I deploy my heroku app with the create-react-app buildpack, the first time I try to access my domain, the page loaded is white and there is an error in the developer console saying

Uncaught SyntaxError: Unexpected token <

in the file main.6396d38a.js:1 which is generated by the react build. However, when I refresh the page, the website works perfectly fine. Is there a reason this could be happening? I tried to replicate the error on my localhost using npm run build, and serve -s build but my website works perfectly fine there. Why would this only show up once after every react deploy to heroku?

My package.json has a homepage associated with the domain name of my website (not .herokuapp.com)

"homepage": "https://www.example.com/"

Could this be cache issue or potentially it's loading additional chunk? — Riddell, Sep 02 '19 at 20:47
I don't think it's a cache issue because I can replicate the error across different browsers. What do you mean by an additional chunk? — rma, Sep 02 '19 at 20:47

Riddell · Accepted Answer · 2019-09-02T21:36:31.327

6

Inside your package.json make sure your homepage URL is correct:

"homepage": "https://app.herokuapp.com/"

Update

Further investigation shows this was a caching issue. Clearing cookies, website content, and DNS fixed the issue.

edited Sep 02 '19 at 21:36

answered Sep 02 '19 at 20:51

Riddell

1,429
11
22

@JohnDoe Have you tried the `type="text/babel"` on script tag trick? – Riddell Sep 02 '19 at 20:53
It's in the question - on line 1 of `main.6396d38a.js` – rma Sep 02 '19 at 20:54
Yes I mean the line of code. Quick question. What version react-scripts are you using and is it using babel or JSTransform? Do you use JSX? – Riddell Sep 02 '19 at 20:55
The files are minified in the build, so the line of code isn't really significant. I am using version 3.1.0 of react-scripts-ts and it is using babel. – rma Sep 02 '19 at 20:58
Are you using TSX ? – Riddell Sep 02 '19 at 21:01
Yes, I am using TSX – rma Sep 02 '19 at 21:01
Do you only use Tsx or are you mixing Jsx? I'm trying to narrow down if it's webpack issue. – Riddell Sep 02 '19 at 21:04
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/198845/discussion-between-johndoe-and-riddell). – rma Sep 02 '19 at 21:06
@JohnDoe Glad, you sorted the issue. – Riddell Sep 02 '19 at 21:33
Same caching issue happened to me. Force reloading by Cmd+shift+r on the production URL fixed the problem. – thecanteen Jun 14 '21 at 06:53

Heroku create-react-app deploy Uncaught SyntaxError: Unexpected token <

1 Answers1

Update

Linked