Question

116

Webpack Babel loading error - Uncaught SyntaxError: Unexpected token import

rated 0 times [ 121] [ 5] / answers: 1 / hits: 52609 / 8 Years ago, fri, july 15, 2016, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alekgermanb

Add To Favorites

Follow

Total Points: 616

Total Questions: 86

Total Answers: 105

Location: Aland Islands

Member since Thu, Dec 23, 2021

2 Years ago

answered 8 Years ago quentinaveryb · Accepted Answer

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.