Webpack Babel loading error - Uncaught SyntaxError: Unexpected token import [duplicate]

Answer 1

First, make sure that you have installed babel core and loader by using:

$ npm install --save-dev babel-loader babel-core

So the correct loader is babel-loader and not babel. The config should be:

module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

---

Actually you need to tell babel to transform your code.

Pre-6.x, Babel enabled certain transformations by default. However, Babel 6.x does not ship with any transformations enabled. You need to explicitly tell it what transformations to run. The simplest way to do this is by using a preset, such as the ES2015 Preset. You can install it with.

$ npm install babel-preset-es2015 --save-dev

After preset installed you have to enable it.

Create a .babelrc config in your project root and enable some plugins.

Assuming you have installed the ES2015 Preset, in order to enable it you have to define it in your .babelrc file, like this:

{
  "presets": ["es2015"]
}

Details in Babel Setup page.

Answer 2

Mikeym

This is an issue with the babel-loader and ES6.

Can you change your webpack.config.js to this:

    module.exports = {
    entry: './src/index.js',
    output: {
        path: './public/',        
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: './public/'
    },
    module: {
        loaders: [
            {test: /\.js$/, exclude: /node_modules/, loader: 'babel?presets[]=es2015' }
        ]
    }
}