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!