Create-react-app: Uncaught SyntaxError: Unexpected token <

[andehwong]

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

_### Can you reproduce the problem with latest npm?_
Yes.

_Can you still reproduce it?_
Yes.

### Description
_What are you reporting?_

I am trying to render a create-react-app build folder using express. If I run it via localhost, it works fine, no problem. However, when I try to render it via my web server (Windows Server 2008, IIS, with iisNode), I get an error saying "Uncaught SyntaxError: Unexpected token <". This comes from the main.8b788f8.js file within the build/static/js folder.

Expected behavior

Tell us what you think should happen.

The express script should render the index.html page from the build folder with no issues.

Actual behavior

Tell us what actually happens.

Nothing is displayed at the web URL. There is one error within the console, stating the following:

main.8b78c8f8.js:1 Uncaught SyntaxError: Unexpected token <

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected): react-scripts @0.9.3
2. node -v: v6.9.5
3. npm -v: 3.10.10

Then, specify:

1. Operating system: Windows Server 2008
2. Browser and version: Google Chrome, Version 57.0.2987.98 (64-bit)

Reproducible Demo

Please take the time to create a new app that reproduces the issue.

Alternatively, you could copy your app that experiences the problem and start removing things until you’re left with the minimal reproducible demo.

(Accidentally, you might get to the root of your problem during that process.)

https://github.com/andehwong/counselling

By doing this, you're helping the Create React App contributors a big time!
Demonstrable issues gets fixed faster.

[Timer]

Could you provide a demo reproducing this, please? I use CRA at work (with IIS) and don't run into this issue.

Also, does this happen if you serve it with pushstate-server as suggested by the instructions after running npm run build?

[gaearon]

The error message says that instead of serving JS, you are serving the HTML file. You can look at build folder and verify that JS is really JS. Therefore, the problem is with how your web server is configured. You should make sure /static/js/main.8b78c8f8.js really serves the JS file, and not something else.

[andehwong]

Hey, I added a demo that reproduces this issue.
https://github.com/AndehWong/counselling

But, I am going to try to serve it with pushstate-server and see if the problem is solved that way.

[gaearon]

What are the steps to reproduce the problem?
Since you’re using a different server, it’s probably a problem on that side rather than in that repo.

[viankakrisna]

In which port that the production express app is running?

You are using homepage with a pathname, does the express server running on that url? Right now https://sscsecure.uwo.ca/counselling/triage/static/js/main.8b78c8f8.js is serving an html error.

If the express is running on different port than 80, the homepage field should also include the port in there.

I agree that we need more information about the setup. or a (non) working demo of the deployed app on that url.

[andehwong]

I had my express running on port 3001, I switched it to port 80 and it still serves up the same issue.
I apologize if I can't provide a demo that has the same issue. As gaearon states, it is a server side issue, but I just don't know why express is deciding to serve up the HTML file rather than the static JS file.

I tried using pushstate-server, and it works fine from there. If I take the build folder, and copy all the build folder contents into the server directory, the application displays fine. It's only when I try to serve it up with express that it runs into issues.

I set up the "homepage" field to url/counselling/triage, as well as included iisnode into my web.config to ensure that iis knows that I am trying to run a node.js application.

If this is more of an IIS/Expressjs issue, then I understand it's outside of what you can help me with, but if it's something related to create-react-app, then any help would be great.

[Timer]

This is purely a configuration issue with your web server application.
Are you using WebAPI, MVC, or .NET Core?

[andehwong]

Very sure that it is .NET Core.

[gaearon]

What is your express code looking like?

[andehwong]

https://github.com/AndehWong/counselling/blob/master/server.js

This is what I used for my expressjs server code as of yesterday. The only change I made was the port to 80, but that did not change anything.

[Timer]

Whoops, sorry. I didn't see that you said you were serving this with express.
I suspect this is causing it.

Here's a snippet from what I use which should be adaptable to your needs:

const path = require('path')
let root = path.join(__dirname, '..', 'build/')
app.use(express.static(root))
app.use(function(req, res, next) {
  if (req.method === 'GET' && req.accepts('html') && !req.is('json') && !req.path.includes('.')) {
    res.sendFile('index.html', { root })
  } else next()
})

Alternatively, you can look into express-history-api-fallback or similar.

[gaearon]

OK, I just realized you had the server in there 😄
I can reproduce now.

The problem is that per your homepage setting, the project is built to be served from /counselling/triage/. However you’re serving it from /. So the paths to static files end up wrong.

This is noted in the build output:

It works if I apply this fix:

- app.use(express.static(path.join(__dirname, '/build')));
+ app.use('/counselling/triage/', express.static(path.join(__dirname, '/build')));

and then open http://localhost:3001/counselling/triage/.

[andehwong]

Ahhh thank you gaearon! That as indeed the fix. Thank you everyone for having patience with me. I am very new to expressjs, this is my first time running a website using it.

I cannot express my gratitudes enough, thank you! :)

[Timer]

Glad it's working! Let us know if you need anything else.

[ViGi-P]

I'm facing this exact same issue with pushstate-server.

[mdo5004]

I'm having a similar issue when I deploy my app to Google's Firebase Hosting. The first time I access the page I get a blank white page and this same error in the console. However, if I refresh, everything works fine. After building my project, however, it says "The project was built assuming it is hosted at the root."

This might be a question for Firebase hosting, but I figured I'd put it up here. I don't see any other questions as closely related to my issue!

[gaearon]

Try opting out of caching and redeploying your app. The fix might take up to 24 hours to propagate (due to a Chrome bug) but if you don't see it on other computers then this should be enough.

[unutoiul]

the same problem with Hapi.js

var frontendIndex: "./../frontend/build",

server.views({
engines: {
html: ejs
},
path: Path.join(__dirname, config.frontendIndex)
});

const Route = {
method: 'GET',
path: '/{param*}',
config: {
auth: false
},
handler: (request, reply) => {
return reply.view('index');
}
};

.4a7826fd.js:1 Uncaught SyntaxError: Unexpected token <
manifest.json:1 Manifest: Line: 1, column: 1, Unexpected token.

any idea?

i've run npm run build

[gaearon]

Hapi.js has no relation to Create React App.

I'll lock this because otherwise we'll keep getting unrelated reports just because this shows up on Google.

If you have a problem with Create React App with similar symptoms please file a new issue.