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.

I don't know if this will solve your problem but here is a tip, you should switch your babel plugin from es2015 to env which is now the recommended approach. — Rafael Berro, Apr 09 '17 at 06:02

Rafael Berro · Answer 1 · 2017-04-09T06:12:50.887

0

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.

edited Apr 09 '17 at 06:12

answered Apr 09 '17 at 06:04

Rafael Berro

2,518
1
17
24

Thanks for the reply. I am getting the same error after making the change. – Ujjwal Vaish Apr 09 '17 at 07:24
Are you trying to require a file which the extension was not specified in the module loaders like .scss or any else ? – Rafael Berro Apr 09 '17 at 18:08
No, I am not trying to require any file for which the extension was not specified in the module loaders. – Ujjwal Vaish Apr 09 '17 at 22:04

score 0 · Answer 2 · answered Apr 09 '17 at 08:04

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

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

2 Answers2