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.

Answer 1

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