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
– Davin Tryon, Commented Aug 22, 2016 at 8: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
– agmcleod, Commented Aug 22, 2016 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
– Logister, Commented Aug 22, 2016 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
– agmcleod, Commented Aug 22, 2016 at 18:08

Logister · Accepted Answer · 2016-08-22 18:49:19Z

1

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.

answered Aug 22, 2016 at 18:49

Logister

1,9141 gold badge25 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Unexpected Token <

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related