react-scripts build then serve is serving html, not the main.js file

Question

I am using react-scripts and successfully ran npm run build to generate the build folder.

I then went to serve it locally by using the serve npm package by running serve -s build.

serve then runs on port 5000, which is good.

When I go to access the page at localhost:5000 the page just stalls out and the following error is in the console main.975cb3de.js:1 Uncaught SyntaxError: Unexpected token < .

I open the main.975cb3de.js file in the console and it is trying to serve the index.html file.

If I empty browser cache and reload the page then it loads fine. This happens every time I run a build.

I have a suspicion that there is a configuration in the serve library but not too sure.

Any thoughts on why it tries to serve HTML first time around and how to fix this?

Apparently there is a Syntax error on your code somewhere, try looking out for any problems in the dev environment before building your app. — Giovanni Klein Campigoto, May 08 '18 at 00:00
@GiovanniKleinCampigoto I don't believe there is a syntax error. When I run it the first time only it gives this error. If I run using `react-scripts start` everything works fine, but it does not run from the build directory, which makes me think it is not a syntax error. — Nicholas Porter, May 08 '18 at 00:10
What happens if you delete the build folder, and run the build command again? — Giovanni Klein Campigoto, May 08 '18 at 00:13
Still same issue. It's weird that the main.js file in the /build is trying to serve the index.html file. It's only on the first time the page is hit after a build, once the user refreshes it's fine. This happens on multiple computers. — Nicholas Porter, May 08 '18 at 00:23
Maybe you should try to build your app using yarn, it's recomended for CRA apps: https://yarnpkg.com/ — Giovanni Klein Campigoto, May 08 '18 at 00:29
@GiovanniKleinCampigoto I just updated `serve` package to the latest version and it is working now...thanks for your help. I probably should use yarn from here on out too. — Nicholas Porter, May 08 '18 at 00:30

Nicholas Porter · Accepted Answer · 2018-05-08T21:07:25.593

1

I was able to fix the issue by updating the serve package to version 6.5.6 and utilizing the --cache flag when running serve.

npm update -g serve

Turns out that when using the -s flag with serve, there is a default caching of 1 day. I had to disable this cache, which fixed the problem.

serve -s ./build --cache=-1

The second command was most critical in fixing the issue.

edited May 08 '18 at 21:07

answered May 08 '18 at 00:35

Nicholas Porter

2,588
2
23
37

react-scripts build then serve is serving html, not the main.js file

1 Answers1