You may need an appropriate loader to handle this file type. Webpack and Babel

Question

I am having trouble configuring Webpack with Babel and React.

Here is my config file-

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, './app/javascripts');

var config = {
  entry: APP_DIR + '/app1.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  }
};

 module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
          xclude: /node_modules/,
        loader : 'babel-loader',
          query: {
        presets: ['es2015']
    }
      }
    ]
  }

module.exports = config;

Here is my babelrc file

{
  "presets" : ["es2015", "react"]
}

I have tried the steps as described in here but still getting config error as mentioned in the title.

Answer 1

Try to use this simple line of code instead, also, you should switch your babel plugin from es2015 (babel-preset-es2015) to env (babel-preset-env) which is now the recommended approach.

  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }

And this should be your .babelrc file.

{
  presets: [ 'env', 'react' ]
}

This should work.

Answer 2

Try specifying the test expression as \\.jsx?$ and also you need not use the .babelrc file if you are specifying the presets in the loaders

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