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

Question

描述

您报告的内容：我正在关注 set of instructions 如何设置 React 热加载器。但是当我转到第 3 步放置补丁时，它会进入下面的那个。

预期行为

您认为应该发生的情况：应该正常工作

实际行为

环境

React Hot Loader 版本：下一个

运行项目文件夹中的这些命令并填写它们的结果：

1. node -v: 7.9.0
2. npm -v: 4.2.0

然后，指定：

1. 操作系统：Windows10
2. 浏览器和版本：最新Chrome

可重现的演示

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

分支：wip-hot-reloader

说明：

• yarn
• yarn run postinstall
• yarn run start:dev

Answer 1

我没有足够的声誉来 post 发表评论，所以我不得不写一个答案，虽然不能完全解决问题，但仍然...

您收到的错误是由于 react-hot-loader/patch 需要实际的 react 模块并用新模块修补其 createElement 功能。 在这里查看：react-hot-loader/lib/patch.dev.js:179

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

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

编辑： 找到了一个简单的解决方案。 将 webpack.config.js 解析块更改为此，将 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 正在运行。