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:
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:
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:
That way the requests always go to
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!