reactjs - 无法设置属性 createElement of#<Object>，它只是一个 getter

Question

描述

您报告的内容:我正在关注此 set of instructions关于如何设置 React 热加载器。但是，当我转到放置补丁的第 3 步时，它会出现以下情况。

预期行为

您认为应该发生什么:应该正常工作

实际行为

环境

React Hot Loader 版本:下一个

在项目文件夹中运行这些命令并填写结果:

1. 节点-v:7.9.0
2. npm -v:4.2.0

然后，指定:

1. 操作系统:Windows 10
2. 浏览器和版本:最新 Chrome

可重现的演示

https://github.com/abarcenas29/preact-sandbox-v0/blob/wip/hot-reloader/src/main.js

分支:wip-hot-reloader

说明:

• yarn
• 安装后运行 yarn
• yarn 运行开始:dev

Answer 1

我没有足够的声誉来发表评论，所以我必须写一个答案，这并不完全是问题的解决方案，但仍然......

您收到的错误是由于 react-hot-loader/patch 需要实际的 react 模块并使用以下命令修补其 createElement 函数一个新的。 在这里查看:react-hot-loader/lib/patch.dev.js:179

主要问题是在 webpack config react 模块已解析为 preact-compat，这显然不允许设置新值，因此热重载无法一起运行。

希望这能回答您的问题。就这样 - 我认为热重载在该设置中不起作用。

编辑: 找到了一个简单的解决方案。 将 webpack.config.js 解析 block 更改为此，将 react 指向您自己的脚本:

// resolve for preact
webpack.resolve = {
  alias: {
    react: path.resolve(__dirname, 'react.js')
    // the rest goes as before
  }
}

现在创建 react.js 文件并将其放入其中(根据需要更改路径和名称):

var preact = require('preact-compat');

var react = {};
// Copy object properties to a new object which will allow react-hot-loader to do its magic
Object.keys(preact).forEach(function(key) {
    react[key] = preact[key];
});

module.exports = react;

完成了! HMR 现已运行。