我有这个配置

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

推荐答案

Babel为React设置了单独的预设,请参见http://babeljs.io/docs/plugins/preset-react/

要安装它,请运行以下命令(这会将其添加到 node 模块和package.json中的devdependency中)

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

Reactjs相关问答推荐

react应用程序中的字体不适用于.scss扩展名

迁移到React Router Dom v6后,我是否错误地使用了Link组件?

Redux Provider Stuck甚至彻底遵循了文档

Google Firestore无法读取图像-react

React Context未正确更新

当项目开始时,它不会从三元运算符(REACT)加载一些tailwind 类名称

我如何使用 React toastify (Promise) toast 和邮箱 js

设置自定义形状的纹理

Symfony ux-react:使用react_component()时React组件不会渲染

使用新数据更新时,React 不更新具有过滤功能的深层嵌套对象数组中的变量状态

useEffect 渲染没有依赖数组的组件

使用状态与复选框不同步

状态链接未传递到路由页面

NextJS htaccess 设置

在嵌套的 Stack Navigator 中的 BottomTabBar 中导航会导致比以前更多的渲染

谁能根据经验提供有关 useEffect 挂钩的更多信息

为什么此代码中的 useState 不更新(文本更新但 id 不更新)?

如何使用 cypress 获取 MUI TextField 的输入值?

单击三个按钮之一后如何显示特定按钮的内容?单击其中一个按钮后应隐藏所有按钮

useEffect 仅在跟随链接后有效,不适用于直接链接