Search code examples
javascriptreactjsnpmservereact-scripts

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

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?

Solution

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

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

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

    The second command was most critical in fixing the issue.