模块构建失败：ReferenceError：[BABEL]

Posted 2023-02-22

【中文标题】模块构建失败：ReferenceError：[BABEL]

【英文标题】：Module build failed: ReferenceError: [BABEL]

【发布时间】：2016-02-22 13:18:37

【问题描述】：

我有这个配置

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>
    )
  
)

在终端中运行webpack 命令时出现问题

    ⇒  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)

【参考方案1】：

Babel 有一个单独的 React 预设，请参阅 http://babeljs.io/docs/plugins/preset-react/

要安装它，请运行以下命令（这会将其添加到您的节点模块和 package.json 中的 devDependencies）

npm install --save-dev babel-preset-react

【讨论】：

@lapponiandevil 未找到

@CaioIglesias 正确的链接现在是 babeljs.io/blog/2015/10/31/setting-up-babel-6（没有 /）

谢谢这解决了我使用 WebPack 为 Auth0 构建 Lock v10 的“模块构建失败：ReferenceError: [BABEL]”错误！