Webpack / Babel / React 构建错误:“未知选项:foo/node_modules/react/react.js.Children”

Posted

技术标签:

【中文标题】Webpack / Babel / React 构建错误:“未知选项:foo/node_modules/react/react.js.Children”【英文标题】:Webpack / Babel / React build error: "Unknown option: foo/node_modules/react/react.js.Children" 【发布时间】:2016-02-17 19:41:06 【问题描述】:

我正在尝试使用 webpack 构建一个项目并使用此 webpack 配置做出反应:

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

有什么想法吗?

【问题讨论】:

你也可以粘贴你的 main.js 吗? 【参考方案1】:

对不起,我忘了安装babel-preset-react

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

【讨论】:

别抱歉。没有地方说需要安装这个 NPM 包。 等等,你为什么需要那个包?它安装了流支持,您可能会或可能不会使用它。是不是需要syntax-jsx? 没有为我修复它。它说你必须在哪里安装这个?【参考方案2】:

我只是想补充一点,我得到了错误我卸载了一个不再在我的项目中使用的旧 npm 模块。这很奇怪,因为我没有在任何地方使用它 - 卸载没有在任何地方使用的东西怎么会导致错误?

原来,其中一个模块 sub-dependencies 有 babel-preset-react,我在启动它时错过了将其安装到我自己的项目中。因此,卸载该软件包也卸载了关键的 babel-preset-react!

一年多以来,由于另一个包的子依赖项,我的 react 应用程序可以编译...


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

【讨论】:

以上是关于Webpack / Babel / React 构建错误:“未知选项:foo/node_modules/react/react.js.Children”的主要内容,如果未能解决你的问题,请参考以下文章

React Native - 为啥我需要 babel 或 webpack?

npm+webpack+babel+react安装

webpack打包react项目babel-loader转换es6语法中‘...’错误

为啥 React 需要 Babel 和 Webpack 才能工作?

Webpack / Babel / React 构建错误:“未知选项:foo/node_modules/react/react.js.Children”

将 webpack 与 babel 和 babel-preset-react 和 babel-preset-es2015 一起使用