Cannot set property createElement of #<Object> which is only a getter

Question

Description

What you are reporting: I am following this set of instructions on how to setup React hot loarder. But when I go to step 3 where I put the patch, it breaks in to the one below.

Expected behavior

What you think should happen: Should work properly

Actual behavior

Environment

React Hot Loader version: next

Run these commands in the project folder and fill in their results:

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

Then, specify:

1. Operating system: Windows 10
2. Browser and version: Latest Chrome

Reproducible Demo

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

branch: wip-hot-reloader

Instructions:

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

Answer 1

I don't have enough reputation to post comments, so I have to write an answer which is not exactly a solution to the problem, but still...

The error you are receiving is due to react-hot-loader/patch requiring the actual react module and patching its createElement function with a new one. See it here: react-hot-loader/lib/patch.dev.js:179

The main problem is that in the webpack config react module is resolved to preact-compat which apparently does not allow setting new values and so Hot Reload fails to run all together.

Hope this answers your question. Being as it is - I think hot reload will not work in that setup.

EDIT: Found an easy solution. Change the webpack.config.js resolve block to this, to point react to your own script:

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

Now create the react.js file and put this inside (change paths and names as you see fit):

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;

And done! HMR is now working.