Webpack/Babel/React 构建错误："Unknown option: foo/node_modules/react/react.js.Children"

Question

我正在尝试使用这个webpack配置来构建一个包含React的项目：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    'babel-polyfill',
    './app/less/main.less',
    './app/main.js',
    'webpack-dev-server/client?http://localhost:8080'
  ],
  output: {
    publicPath: '/',
    filename: 'dist/main.js'
  },
  debug: true,
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'app'),

        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      },
      {
        test: /\.less$/,
        loader: "style!css!autoprefixer!less"
      },
    ]
  }
};

我确信我已经安装了所需的pm模块，并且已经安装了webpack，但是在运行webpack时，出现以下错误：

Module build failed: ReferenceError: [BABEL] /Users/me/foo/app/main.js: Unknown option: foo/node_modules/react/react.js.Children

有什么想法吗？

- SuperUberDuper

---

你能否也复制粘贴你的 main.js 文件呢？ - Wint

Answer 1

对不起，我忘记安装 babel-preset-react：

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

- SuperUberDuper

---

不用抱歉，没有说一定要安装这个NPM包。 - AxeEffect

等一下，你为什么需要那个包？它安装了Flow支持，而你可能并没有使用。你是需要syntax-jsx吗？ - U Avalos

对我没有修复。哪里写了必须要安装这个？ - sudo

Answer 2

我只想补充一下，我在卸载不再使用的旧npm模块后出现了错误之后。这很奇怪，因为我没有在任何地方使用它 - 卸载未在任何地方使用的东西如何导致错误？

事实证明，其中一个模块的子依赖项包含babel-preset-react，我在项目开始时错过了将其安装到自己的项目中。因此，卸载该软件包也卸载了关键的babel-preset-react！

一年多来，我的react应用程序可以编译，这要归功于另一个软件包的子依赖项...

---

是的，安装 babel-preset-react 对我解决了这个问题。

- Chris