Module Parse Error

[f0rr0]

Using es6 for webpack.config.babel.js which looks like

'use strict';
import path from 'path';
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import StatsPlugin from 'stats-webpack-plugin';
import merge from 'webpack-merge';

const ENV = process.env.NODE_ENV;
const TARGET = process.env.npm_lifecycle_event;

const development = {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, 'app/main.js')
  ],
  output: {
    path: path.join(__dirname, '/dist'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.tpl.html',
      inject: 'body',
      filename: 'index.html'
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ],
  module: {
    loader: [{
      test: /\.jsx?$/,
      exclude: /(node_modules)/,
      loader: 'babel'
    }, {
      test: /\.json?$/,
      loader: 'json'
    }, {
      test: /\.scss$/,
      loader: 'radium!css!sass?modules&localIdentName=[name]---[local]---[hash:base64:5]'
    }]
  }
};

if (ENV !== 'production') {
  module.exports = development;
} else {
  const production = {
    entry: [path.join(__dirname, 'app/main.js')],
    output: {
      path: path.join(__dirname, '/dist/'),
      filename: '[name]-[hash].min.js'
    },
    plugins: [
      new webpack.optimize.OccurenceOrderPlugin(),
      new HtmlWebpackPlugin({
        template: 'app/index.tpl.html',
        inject: 'body',
        filename: 'index.html'
      }),
      new webpack.optimize.UglifyJsPlugin({
        compressor: {
          warnings: false,
          screw_ie8: true
        }
      }),
      new StatsPlugin('webpack.stats.json', {
        source: false,
        modules: false
      }),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      })
    ]
  };
  module.exports = merge(development, production);
}

app/main.js looks like

'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import Foo from './components/foo/foo.jsx';
ReactDOM.render(<Foo />, document.getElementById('root'));

On running npm start I get the error:

ERROR in ./app/main.js
Module parse failed: <project>/app/main.js Line 3: Unexpected token
You may need an appropriate loader to handle this file type.
| 'use strict';
|
| import React from 'react';
| import ReactDOM from 'react-dom';
| import Foo from './components/foo/foo.jsx';
 @ multi main

[christianalfoni]

You are pointing babel loader to .jsx it seems. I suggest using .js and forget about .jsx all together :-) It makes things a lot easier. Or you have to point babel loader to both .js and .jsx.

[calrays]

The regex /\.jsx?$/ should accept both .js and .jsx.
/\.js?$/ in the boilerplate might as well be /\.jsx?$/, or /\.js$/ if you don't want the added flexibility for some reason.

[f0rr0]

I second the comment by @calvinrachuy
/\.jsx?$/ will match both js and jsx
? matches 0 or 1 occurrence of the preceding token.
$ matches ending position of the string.

I have been unable to use ES6 imports in a webpack config file even after much research. There seems to be no consistent solution that works all the time. Requiring babel-register works but not 100% of the time.

[christianalfoni]

Hm, I find this rather strange. Running Babel is the one thing that has been very consistent experience for me, though there are many pitfalls in Webpack.

But when you install this boilerplate and just run it.. it does not work?