CODEWITHSUNDEEP
javascriptexpressreactjswebpackbabeljs
Logister
Logister

Reputation: 1904

React Unexpected Token <

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.

enter image description here

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

enter image description here

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.

Upvotes: 3

Views: 993

Answers (1)

Logister
Logister

Reputation: 1904

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.

Upvotes: 1

Related Questions