Module build failed: ReferenceError: [BABEL]
27,670
Babel has a separate preset for React, see http://babeljs.io/docs/plugins/preset-react/
To install this, run the following command (this adds it to your node modules and your devDependencies in package.json)
npm install --save-dev babel-preset-react
Author by
przbadu
BY DAY: full-stack freelancer BY NIGHT: I write codes, do stupid stuff with it, sometimes I win and sometimes bug!!, as a programmer, Its always competition between me and bug..... Yeah Yeah!! I write test cases for my features o_0. “ Computers are good at following instructions, but not at reading your mind. ” - Donald Knuth
Updated on December 27, 2020Comments
-
przbadu over 3 years
I have this configuration
package.json
{ "name": "app02", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": { "react": "^0.14.3" }, "devDependencies": { "babel-core": "^6.2.1", "babel-loader": "^6.2.0", "babel-preset-es2015": "^6.1.18" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "private": true }
webpack.config.js
module.exports = { entry: "./src/main.js", output: { path: __dirname + "/public", filename: "bundle.js" }, module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['react', 'es2015'] } } ] } }
src/main.js
import React from 'react'; import Greenting from './components/greeting'; React.render( <Greeting name="World" />, document.getElementById('content') );
src/components/greeting.js
import React from 'react'; export default React.createClass({ render: function(){ return ( <div className="greeting"> Hello, {this.props.name}! </div> ) } })
PROBLEM when running
webpack
command in terminal⇒ webpack Hash: 396f0bfb9d565b6f60f0 Version: webpack 1.12.6 Time: 722ms + 1 hidden modules ERROR in ./src/main.js Module build failed: ReferenceError: [BABEL] ~/app02/src/main.js: Unknown option: ~/app02/node_modules/react/react.js.Children at Logger.error (~/app02/node_modules/babel-core/lib/transformation/file/logger.js:41:11) at OptionManager.mergeOptions (~/app02/node_modules/babel-core/lib/transformation/file/options/option-manager.js:262:18) at OptionManager.mergePresets (~/app02/node_modules/babel-core/lib/transformation/file/options/option-manager.js:325:16) at OptionManager.mergeOptions (~/app02/node_modules/babel-core/lib/transformation/file/options/option-manager.js:287:12) at OptionManager.init (~/app02/node_modules/babel-core/lib/transformation/file/options/option-manager.js:416:10) at File.initOptions (~/app02/node_modules/babel-core/lib/transformation/file/index.js:190:75) at new File (~/app02/node_modules/babel-core/lib/transformation/file/index.js:121:22) at Pipeline.transform (~/app02/node_modules/babel-core/lib/transformation/pipeline.js:42:16) at transpile (~/app02/node_modules/babel-loader/index.js:14:22) at Object.module.exports (~/app02/node_modules/babel-loader/index.js:87:14)
-
Caio Iglesias about 8 years@lapponiandevil not found
-
Timon about 8 years@CaioIglesias correct link is now babeljs.io/blog/2015/10/31/setting-up-babel-6 (without the /)
-
Tarostar over 6 yearsThank you this solved my "Module build failed: ReferenceError: [BABEL]" error using WebPack to build Lock v10 for Auth0!