Webpack + Babel error

Question

I am trying to configure webpack and had everything up and running, but am now getting this same error. I\'ve combed through a few other posts that seem to have been resolved by

Answer 1

You are using ES6 version of Javascript. You need preset config in webpack to understand and transpile that.

Can you try adding following to your webpack module config?

 loaders : [
      {
        test:/\.jsx?$/,
        exclude:/node_modules/,
        loader: 'babel-loader',
        query:{
          presets: ['es2015','react','stage-0']
        }
      },
      // ... 
   ]

Answer 2

The problem is that you defined both module.rules and module.loaders. Webpack completely ignores module.loaders (which only exists for compatibility reasons) whenever module.rules is present. In your case, all JavaScript rules are inside module.loaders, so none of them are being used.

To fix it put everything inside module.rules. And you also have two rules for .js files, as /\.js?$/ matches .j and .js, because ? means one or zero occurrences, similarly /\.jsx?$/ matches .js and .jsx, which is what you really want, and it doesn't make sense to have a rule for .j.

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loaders: ['react-hot-loader', 'babel-loader']
    },
    {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'postcss-loader']
    },
    {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
      loader: 'url-loader?limit=10000',
    },
    {
      test: /\.css$/,
      use: [ 'style-loader', 'css-loader' ]
    }
  ]
}