title: Webpack Babel loading error - Uncaught SyntaxError: Unexpected token import
body: <p>I'm new to Webpack and running into a problem following <a href="http://jarstingstall.github.io/getting-started-with-webpack-part-3/" rel="noreferrer">this tutorial</a>.</p>
  
  <p>It seems the webpack.config.js isn't setting up <code>babel-loader</code> correctly but I'm not sure.In the console I see the following error:</p>
  
  <pre><code>bundle.js:49 Uncaught SyntaxError: Unexpected token import
  </code></pre>
  
  <p>Which refers to the line <code>import sortBy from 'lodash/collection/sortBy';</code> of my <code>index.js</code>. So I assume it's a babel transpiling problem(not allowing the <code>import</code> syntax of ES6?) </p>
  
  <p>Here is the complete <code>index.js</code> file </p>
  
  <pre><code>import sortBy from 'lodash/collection/sortBy';
  import {users} from './users';
  import {User} from './User';
  
  sortBy(users, 'name')
      .map(user =&gt; {
          return new User(user.name, user.age);
      })
      .forEach(user =&gt; {
          console.log(user.display);
      });
  </code></pre>
  
  <p>And <code>webpack.config.js</code> looks like this:</p>
  
  <pre><code>module.exports = {
      entry: './src/index.js',
      output: {
          path: './public/',        
          filename: 'bundle.js'
      },
      devServer: {
          contentBase: './public/'
      },
      module: {
          loaders: [
              {test: /\.js$/, exclude: /node_modules/, loader: 'babel'}
          ]
      }
  } 
  </code></pre>
  
  <p>I've searched through other questions that looked like they relate to the problem <a href="https://stackoverflow.com/questions/33460420/babel-loader-jsx-syntaxerror-unexpected-token">here</a> and <a href="https://stackoverflow.com/questions/35965812/webpack-babel-react-uncaught-syntaxerror-unexpected-token">here</a> 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!  </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>The specific babel loading error was resolved by following the steps outlined in  answer posted below by Alexandre Thebaldi.</p>
  
  <p>However, a new error occurred - 
  <code>Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'</code> </p>
  
  <p>If you are working through <a href="http://jarstingstall.github.io/getting-started-with-webpack-part-one/" rel="noreferrer">this tutorial</a> and encounter this error, it is most likely caused by an incorrect path in the <code>index.js</code>,specifically the fact that the <code>lodash/collections</code> directory seems to no longer exist. I managed to resolve this second error by simply changing the path to <code>lodash/sortBy</code>.</p>
  
  <p><strong>NOTE</strong></p>
  
  <p>Be sure to first check that <code>lodash</code> is installed in <code>node_modules</code> and the path is correct manually before changing it.</p>