Unexpected token import with Webpack and Babel

Question

I added react-router v4 to my project with Webpack and NodeJS. The app compiled correctly without any error messages in the log, but the browser console gave me this:

Uncaught SyntaxError: Unexpected token import
    at Object.<anonymous> (bundle.js:3391)
    at __webpack_require__ (bundle.js:556)
    at fn (bundle.js:87)
    at Object.eval (eval at <anonymous> (bundle.js:1405), <anonymous>:11:25)
    at Object.eval (eval at <anonymous> (bundle.js:1405), <anonymous>:24:27)
    at eval (eval at <anonymous> (bundle.js:1405), <anonymous>:25:30)
    at Object.<anonymous> (bundle.js:1405)
    at __webpack_require__ (bundle.js:556)
    at fn (bundle.js:87)
    at Object.eval (eval at <anonymous> (bundle.js:3379), <anonymous>:12:17)

I think that the problem is in the Webpack configuration. This is my webpack.config.js:

var path = require('path')
var webpack = require('webpack')
var NpmInstallPlugin = require('npm-install-webpack-plugin')
var autoprefixer = require('autoprefixer');
var precss = require('precss');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    'babel-polyfill',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new NpmInstallPlugin()
  ],
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        loaders: ['eslint'],
        include: [
          path.resolve(__dirname, "src"),
        ],
      }
    ],
    loaders: [
      {
        loaders: ['react-hot', 'babel-loader'],
        include: [
          path.resolve(__dirname, "src"),
        ],
        test: /\.js$/,
        plugins: ['transform-runtime'],
        presets: ['es2015','react']
      },
      {
        test:   /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function () {
    return [autoprefixer, precss];
  }
}

Here is my package.json file:

{
  "name": "redux-ru-tutorial",
  "version": "1.0.0",
  "description": "Redux RU tutorial",
  "main": "index.js",
  "scripts": {
    "start": "node server.js"
  },
  "author": "Yuriy Shipovalov",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "babel-core": "^6.4.5",
    "babel-eslint": "^4.1.6",
    "babel-loader": "^6.2.1",
    "babel-plugin-transform-runtime": "^6.4.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "css-loader": "^0.23.1",
    "eslint": "^1.10.3",
    "eslint-loader": "^1.2.1",
    "eslint-plugin-react": "^3.16.1",
    "express": "^4.13.4",
    "npm-install-webpack-plugin": "^2.0.2",
    "postcss-loader": "^0.8.0",
    "precss": "^1.4.0",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.12",
    "webpack-dev-middleware": "^1.5.1",
    "webpack-hot-middleware": "^2.6.4"
  },
  "dependencies": {
    "babel-polyfill": "^6.3.14",
    "babel-runtime": "^6.3.19",
    "cors": "^2.8.3",
    "history": "^4.6.1",
    "jquery": "^3.2.1",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-redux": "^4.0.6",
    "react-redux-router": "0.0.5",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "redux": "^3.3.1",
    "redux-logger": "2.5.2",
    "redux-thunk": "1.0.3"
  }
}

Here is my index.js file:

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import {BrowserRouter as Router, Route} from 'react-router-dom'
import App from './containers/App'
import './styles/app.css'
import configureStore from './store/configureStore'

const store = configureStore()
console.log(store.getState())
render(
  <Provider store={store}>
      <Router>
          <Route> path="/" component={App}></Route>
      </Router>
  </Provider>,
  document.getElementById('root')
)

Answer 1

Here's an example from webpack documentation:

module.rules allows you to specify several loaders within your webpack configuration. This is a concise way to display loaders, and helps to maintain clean code. It also offers you a full overview of each respective loader.

In your case, you can:

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: [
          'react-hot','babel-loader'
        ]
      }
    ]
  }

Hope this helps.

Answer 2

You're attempting to set Babel's plugins and presets directly in the Webpack configuration as part of module.loaders. This is incorrect. You have to pass it as options to the loader. The error is because you're passing the options incorrectly so Babel does not receive the options, and thus does not transpile your code based on the presets and thus the error.

Depending on your Webpack version, try:

Webpack 1.x

Since you have multiple loaders, you cannot set it in the query object. Instead, you are going to have to set your loader options inline:

{
    test: /\.js$/,
    loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react?plugins[]=transform-runtime']
}

This will directly pass the loader options to Babel through a query, but since you have two loaders Webpack didn't know which loader to query so you have to do it inline on one loader.