Question

我想在我的项目中升级它之前尝试使用React 0.14旋转。但是，使用简单的“hello world”原型，Webpack会抛出一个错误：

ERROR in ./~/react/lib/ReactElement.js
Module parse failed: /home/dan/Demos/reactiflux/node_modules/babel-loader/index.js!/home/dan/Demos/reactiflux/node_modules/react/lib/ReactElement.js Line 25: Unexpected string
You may need an appropriate loader to handle this file type.
| // The Symbol used to tag the ReactElement type. If there is no native Symbol
| // nor polyfill, then a plain number is used for performance.
| var REACT_ELEMENT_TYPE = typeof _Symbol === 'function' && _Symbol.'for' && _Symbol.'for'('react.element') || 0xeac7;
| 
| var RESERVED_PROPS = {
 @ ./~/react/lib/ReactMount.js 18:19-44

我确实配置了babel-loader，当我降级到React 0.13时，一切正常。对我来说真正突出的是_Symbol.'for'，在错误信息的中间。

在第21行（而不是25）的react / lib / ReactElement.js中，该行看起来更正确，'for'键周围有方括号：

var REACT_ELEMENT_TYPE = typeof Symbol === 'function' && Symbol['for'] && Symbol['for']('react.element') || 0xeac7;

我假设错误消息中显示的代码在编译期间处于中间状态，或者是最终编译输出。有谁知道什么可能导致Webpack产生看起来错误的东西？有没有人成功使用过Webpack，Babel和React~0.14.4？

更新

这有一个问题：https://github.com/babel/babel/issues/2377

它关闭了，但看起来它回来了。这在5.8.25修正，但我有5.8.29，我仍然遇到了这个错误。

Answer 1

问题似乎与我有关，包括babel运行时。我的.babelrc是从旧项目中复制的：

{
    "optional": "runtime",
    "stage": 0
}

在这个小小的hello-world演示中，没有什么需要捆绑运行时，所以我注意到https://github.com/DominicTobias/universal-react/（也使用相同的构建工具）不需要它后删除它。这是我需要做的唯一改变才能实现这个目标。

我的webpack配置非常简单：

var path = require("path");

module.exports = {
    entry: "./index.js",
    output: {
        path: path.join(__dirname, "/dist"),
        filename: "index.min.js"
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: "babel"
        }]
    }
};

我想这就是我将配置文件从一个更复杂的项目复制到本来应该是最简单的演示的过程。

我看到NPM上有一个babel-plugin-runtime以及一个babel-runtime，但是当我为了完整性而尝试BPR时，Babel抱怨：Module build failed: ReferenceError: The plugin "runtime" collides with another of the same name。由于我实际上并不需要运行时，因此链接的GH repo是404，因为它确实属于问题跟踪器，所以这就是我现在要做的。

Answer 2

不，这不是有效的代码。这是Babel项目中的一个问题，但它已在最近发布的6.0版本中得到修复。

我也遇到过这个问题，现在我已经用最新版本检查了这个问题，并且它运行正常。这是我的测试步骤：

# install Babel and plugins
npm install babel-cli babel-preset-es2015 babel-plugin-transform-runtime
# install React
npm install react 
# run babel against problem react file
./node_modules/.bin/babel node_modules/react/lib/ReactElement.js --plugins transform-runtime --presets es2015

它提供了有效的输出，因此问题似乎得到了解决。

并且有好消息，对于webpack babel-loader已经支持6个版本的Babel。查看其文档以获取详细信息

`_Symbol.'for'`：这实际上是有效的ES6吗？ Webpack从React源

2 个答案: