Webpack with babel-loader not recognizing import keyword

Question

I have this webpack.config.js:

module.exports = {
  entry: './src/admin/client/index.jsx',
  output: {
    filename: './src/admin/client/static/js/app.js'
  },
  loaders: [
    {
      test: /\.jsx?$/,
      loader: 'babel',
      exclude: /node_modules/,
      query: {
        optional: ['runtime']
      }
    }
  ],
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
};

...yet I still get this error:

$ webpack -v
Hash: 2a9a40224beb025cb433
Version: webpack 1.10.5
Time: 44ms
   [0] ./src/admin/client/index.jsx 0 bytes [built] [failed]

ERROR in ./src/admin/client/index.jsx
Module parse failed: /project/src/admin/client/index.jsx Line 1: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| import React from 'react';
| import AdminInterface from './components/AdminInterface';

I have:

Installed webpack globally and locally
Installed babel-loader, babel-core, and babel-runtime
Installed babel-loader globally, just in case

Why the hell is webpack seemingly ignoring babel-loader? Or does babel-loader not work with modules?

Update:

It looks like babel handles the input file just fine. When I run:

./node_modules/babel/bin/babel.js ./src/admin/client/index.jsx

...it outputs ES5 as expected. Therefore, it seems to me like somehow webpack isn't properly loading babel-loader.

score 33 · Accepted Answer · answered Aug 04 '15 at 02:52

33

This looks like a case of operator error. My webpack.config.js structure was not correct. Specifically, I needed to put the loader details inside of a module section:

module.exports = {
  entry: './src/admin/client/index.jsx',
  output: {
    filename: './src/admin/client/static/js/app.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          optional: ['runtime']
        }
      }
    ],
    resolve: {
      extensions: ['', '.js', '.jsx']
    }
  }
};

answered Aug 04 '15 at 02:52

Jacob

77,566
24
149
228

1

I've put it properly under module only, but still getting same error – Abhinav Singi Dec 28 '15 at 20:28
d'Oh! did the same thing. Thanks! – Jauco Mar 28 '16 at 13:47
2

I get so many upvotes to this. I wonder if we've all been victim to the same confusing source material that causes this mistake; would be good to know what that source is so we can have them clarify things. – Jacob Jul 29 '16 at 22:14

Adam Bertrand · Answer 2 · 2015-12-31T14:20:12.887

15

I fixed the same problem by including the es2015 and react presets and then adding them to the webpack.config.js file.

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

as explained in this post: https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

my full webpack.config.js file:

module.exports = {
  context: __dirname + "/src",
  entry: './main',
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { 
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ['es2015', 'react']
        }
      }
    ],
    resolve: {
      extensions: ['.js', '.jsx']
    }
  }
};

edited Dec 31 '15 at 14:20

answered Dec 31 '15 at 14:05

Adam Bertrand

151
1
5

This fixed webpack not compiling es6 imports for me. I had to do `presets: ['stage-0', 'es2015', 'react']` for webpack to compile correctly. – jefffan24 Jan 02 '16 at 00:12
This was a lifesaver!! Thanks!! – Arunabh Das Feb 02 '16 at 07:54

score 10 · Answer 3 · answered Jan 22 '16 at 08:41

What is the version of your babel?If babel version is up to 6+.You need to identify the preset 'es2015' and 'react' like this

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel', // 'babel-loader' is also a legal name to reference
      query: {
        presets: ['react', 'es2015']
      }
    }
  ]
}

Don't forget to install these modules:

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

Webpack with babel-loader not recognizing import keyword

3 Answers3

Linked