Webpack Babel loading error - Uncaught SyntaxError: Unexpected token import

Question

I'm new to Webpack and running into a problem following this tutorial.

It seems the webpack.config.js isn't setting up babel-loader correctly but I'm not sure.In the console I see the following error:

bundle.js:49 Uncaught SyntaxError: Unexpected token import

Which refers to the line import sortBy from 'lodash/collection/sortBy'; of my index.js. So I assume it's a babel transpiling problem(not allowing the import syntax of ES6?)

Here is the complete index.js file

import sortBy from 'lodash/collection/sortBy';
import {users} from './users';
import {User} from './User';

sortBy(users, 'name')
    .map(user => {
        return new User(user.name, user.age);
    })
    .forEach(user => {
        console.log(user.display);
    });

And webpack.config.js looks like 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'}
        ]
    }
} 

I've searched through other questions that looked like they relate to the problem here and here as well as googling around but haven't found a solution or reason why I'm getting the error yet. Maybe the tutorial is out of date.Any guidance how to fix this issue would be much appreciated!

UPDATE

The specific babel loading error was resolved by following the steps outlined in answer posted below by Alexandre Thebaldi.

However, a new error occurred - Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'

If you are working through this tutorial and encounter this error, it is most likely caused by an incorrect path in the index.js,specifically the fact that the lodash/collections directory seems to no longer exist. I managed to resolve this second error by simply changing the path to lodash/sortBy.

NOTE

Be sure to first check that lodash is installed in node_modules and the path is correct manually before changing it.

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' }
        ]
    }
}