CODEWITHSUNDEEP
reactjswebpackjsx
hjm
hjm

Reputation: 1953

react js webpack bundling error for jsx files

I'm currently doing a small application. I'm using Webpack to bundle my files, when I tried to execute webpack in my command line I get this error below, however, if the entry extension './public/app.js' it works perfectly. I don't understand what am I doing wrong. I did look at some other posts, but were different from my problem. I would appreciate the help if any thank you.

ERROR in ./public/app.jsx Module build failed: ReferenceError: [BABEL] /Users/jair/Desktop/development/react-test/public/app.jsx: Unknown option: base.preset. Check out http://babeljs.io/docs/usage/options/ for more info at Logger.error (/Users/jair/Desktop/development/react-test/node_modules/babel-core/lib/transformation/file/logger.js:41:11) at OptionManager.mergeOptions (/Users/jair/Desktop/development/react-test/node_modules/babel-core/lib/transformation/file/options/option-manager.js:216:20) at OptionManager.init (/Users/jair/Desktop/development/react-test/node_modules/babel-core/lib/transformation/file/options/option-manager.js:338:12) at File.initOptions (/Users/jair/Desktop/development/react-test/node_modules/babel-core/lib/transformation/file/index.js:216:65) at new File (/Users/jair/Desktop/development/react-test/node_modules/babel-core/lib/transformation/file/index.js:137:24) at Pipeline.transform (/Users/jair/Desktop/development/react-test/node_modules/babel-core/lib/transformation/pipeline.js:46:16) at transpile (/Users/jair/Desktop/development/react-test/node_modules/babel-loader/index.js:38:20) at Object.module.exports (/Users/jair/Desktop/development/react-test/node_modules/babel-loader/index.js:131:12)

module.exports = {
entry: './public/app.jsx',
output: {
  path: __dirname,
  filename: './public/bundle.js'
},
resolve: {
  exensions: ['', '.js', '.jsx']
},
module: {
  loaders: [
    {
       loader: 'babel-loader',
       query: {
         preset: ['react', 'es2015']
       },
       test: /\.jsx?$/,
       exclude: /(node_modules | bower_components)/
    }
  ]
}

};

Upvotes: 1

Views: 255

Answers (1)

Nick Uraltsev
Nick Uraltsev

Reputation: 25917

The correct option name is presets, not preset:

query: {
  presets: ['react', 'es2015']
}

Also, I believe white spaces in the exclude regex need to be removed:

exclude: /(node_modules|bower_components)/

Hope this helps!

Upvotes: 2

Related Questions