React Unexpected Token <

Question

I'm working through the react router tutorial using my own custom webpack build, and I am getting an "Unexpected token <" error. This is usually due to the babel transpiler being incorrectly specified. However, this is not the case here. My transpiler works as specified during the dev build, but it fails under the same setup for the production build. I have no idea why.

My .babelrc file has the right presets:

...
"presets": ["es2015", "stage-0", "react"]
...

My webpack.config.js uses this to transpile for dev:

loaders: [{
        test: /\.js$/,
        loaders: ['react-hot', 'babel?cacheDirectory=' + PATHS.cache],
        exclude: PATHS.node_modules
    }...

My webpack.config.js uses this to transpile for prod:

loaders: [{
        test: /\.js$/,
        loader: 'babel',
        exclude: PATHS.node_modules,
    }...

and my package.json has all the right libraries:

...
"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-eslint": "^4.1.3",
  "babel-loader": "^6.2.5",
  "babel-plugin-transform-runtime": "^6.12.0",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-react": "^6.0.15",
  "babel-preset-react-hmre": "^1.1.1",
  "babel-preset-stage-0": "^6.0.15",
...
"dependencies": {
  "react": "^0.14.6",
  "react-d3-wrap": "^2.1.2",
  "react-dom": "^0.14.6",
  "react-redux": "^4.4.5",
  "react-router": "^2.7.0",
...

Curiously, Chrome reports that the html from index.html has actually replaced the main .js file. And thus the error.

However, directly inspecting the files reveals that this is not the case:

You can find a repo of the build here

Any idea what could be going on here?

EDIT: When my server requests the bundle it gets back html. So perhaps there is something wrong with the prod-server:

var express = require('express');
var path = require('path');
var compression = require('compression');

var app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', function (req, res) {
     res.sendFile(path.join(__dirname, 'dist', 'index.html'))
});

var PORT = process.env.PORT || 8080;
app.listen(PORT, function () {
    console.log("Production express server running at localhost: " + PORT)
});

EDIT2: Something is wrong with how I am resolving requests here. If I remove:

app.get('*', function (req, res) {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

I am then able to send requests to the bundle and get the bundle back. With this line in, sending a request to get the bundle returns index.html.

what does your server return when the browser requests the bundle? — Davin Tryon, Aug 22 '16 at 08:28
It looks like you're doing the request as .js, which is probably throwing off the browser. You need to request it as .html, or ensure that you return the correct content-type from the express side. — agmcleod, Aug 22 '16 at 16:47
@agmcleod, adding in `res.set({'Content-Type': 'text/html'});` to the server doesn't change the error. It is still index.html inside of the .js bundle. — Logister, Aug 22 '16 at 17:45
Ah okay I see. I think the issue is the get("*") that returns the html file every time. You have the static path setup, but the get is likely catching all requests. Instead, I would recommend using `get("/", ...` and setup additional routes as you need them. You might be able to use `get("*"` after a `get("/dist/*"` that just does a call to next() in the callback. But i haven't test it. — agmcleod, Aug 22 '16 at 18:08
Awesome, `get('/')` seems to have solved part of the problem. Another problem seems to be that HtmlWebpackPlugin is putting in incorrect paths inside of index.html for the prod server. Investigating. — Logister, Aug 22 '16 at 18:27

score 1 · Answer 1 · answered Aug 22 '16 at 18:49

As agmcleod suggested, I needed to change the way my express router handled requests: get('*', ... needed to be switched to get('/', .... Additionally I needed to change my webpack public path to '/' instead of path.join(__dirname, 'dist'). Webpack was putting fully qualified directories inside of my src attributes and was not making them relative to the static path in my express server.

There are other problems going on in the referenced repo, but I believe that they are unrelated to the question posted.

Thanks to @DavidTyron and @agmcleod for putting me on the right track.

React Unexpected Token <

1 Answers1