javascript - Webpack Babel loading error - Uncaught SyntaxError: Unexpected token import -

this question has answer here:

• babel file copied without being transformed 5 answers

i'm new webpack , running problem following this tutorial.

it seems webpack.config.js isn't setting babel-loader correctly i'm not sure.in console see following error:

bundle.js:49 uncaught syntaxerror: unexpected token import 

which refers line import sortby 'lodash/collection/sortby'; of index.js. assume it's babel transpiling problem(not allowing import syntax of es6?)

here complete index.js file

import sortby 'lodash/collection/sortby'; import {users} './users'; import {user} './user';  sortby(users, 'name')     .map(user => {         return new user(user.name, user.age);     })     .foreach(user => {         console.log(user.display);     }); 

and webpack.config.js looks 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 looked relate problem here , here googling around haven't found solution or reason why i'm getting error yet. maybe tutorial out of date.any guidance how fix issue appreciated!

update

the specific babel loading error resolved following steps outlined in answer posted below alexandre thebaldi.

however, new error occurred - module not found: error: cannot resolve module 'lodash/collection/sortby'

if working through this tutorial , encounter error, caused incorrect path in index.js,specifically fact lodash/collections directory seems no longer exist. managed resolve second error changing path lodash/sortby.

note

be sure first check lodash installed in node_modules , path correct manually before changing it.

first, make sure have installed babel core , loader using:

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

so correct loader babel-loader , not babel. config should be:

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

---

actually need tell babel transform code.

pre-6.x, babel enabled transformations default. however, babel 6.x not ship transformations enabled. need explicitly tell transformations run. simplest way using preset, such es2015 preset. can install with.

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

after preset installed have enable it.

create .babelrc config in project root , enable plugins.

assuming have installed es2015 preset, in order enable have define in .babelrc file, this:

{   "presets": ["es2015"] } 

details in babel setup page.