I’ve been fiddling around with React recently and made some pages with some normal-looking URLs, despite being a single-page application. This was done using React Router and configuring it to use the History API with browserHistory. Here is one of those URLS:

http://localhost:3000/course/react-flux-building-applications

When the page was refreshed (either manually or by the hot loader), or when I visited that page manually, I got this odd error in the console:

Unexpected token <

When I inspected the contents of bundle.js, which is what I had configured webpack to bundle all of my JS in to, I noticed it wasn’t JS at all; it was the HTML for my index page!

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Pluralsight Admin</title>
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

After a few moments of wondering, I realised what had happened. It was pretty dumb. Can you see it?


What happened is that bundle.js was being loaded from:

http://localhost:3000/course/bundle.js

And not:

http://localhost:3000/bundle.js

Since the URL was not recognised, webpack or React Router (I’m unsure exactly which) merely served index.html instead of a 404 error.

This meant that HTML was served for a JS request!

The simple fix is to change:

<script src="bundle.js"></script>

To:

<script src="/bundle.js"></script>

That way the requests always go to http://localhost:3000/bundle.js.

This may need to be solved slightly better if I don’t want to host the application at the root of a domain, but it’ll work for now while I experiment!