Unable to set the createElement property from # <Object>, which is the only recipient

Question

Description

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

Expected Behavior

What you think should happen: should work fine

Actual behavior

Environment

React version of Hot Loader: next

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

• node -v : 7.9.0
• npm -v : 4.2.0

Then indicate:

• Operating System: Windows 10
• Browser and version: latest Chrome

Playable Demo

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

branch: wip-hot-reloader

Instruction:

• 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 that is not a solution to the problem, but still ...

The error you are getting is related to react-hot-loader/patch , requiring the actual react module and fixing its createElement function with the new one. See here: react-hot-loader/lib/patch.dev.js:179

The main problem is that the preact-compat module is preact-compat in webpack config react , which, apparently, does not allow setting new values, and therefore Hot Reload cannot complete everything together.

Hope this answers your question. Be that as it may - I think a hot reboot will not work in this setting.

EDIT: Found an easy solution. Change the webpack.config.js permission webpack.config.js 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 a react.js file and put it inside (change the paths and names as you like):

 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 now works.