8

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

image

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
Mr A
  • 1,345
  • 4
  • 22
  • 51

1 Answers1

11

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.

Pavel Denisjuk
  • 1,475
  • 12
  • 13
  • 1
    Thanks. I'm having suspicions of that. I'll test this theory out later and see if it is. I'll come back and award you if this was the case. Again, Thanks!!! – Mr A Jun 01 '17 at 15:26
  • This is the place where the import of `react` takes place: `react-hot-loader/lib/patch.dev.js:7` and if you try setting the `createElement` property here yourself - the exact same error occurs. Good luck! – Pavel Denisjuk Jun 01 '17 at 16:39
  • @MrA the problem was so interesting, I couldn't let it go :D Edited the answer with the code which solves your problem. HMR is now working. Cheers! – Pavel Denisjuk Jun 03 '17 at 08:28
  • I converted my repo from preact to react and it manage to work as you had said. I tried doing your suggestion and the behavior is that every time I change something, it refreshes the page. Hence, the HMR stopped working. – Mr A Jun 04 '17 at 10:47
  • It reloads the page only if you edit the `main.js` since it is a top level file containing the app component. If you edit `App.js` or any child components imported from `App.js` HMR will work properly. However, If you are not strictly tied to `preact` than using the actual `react` is a better way to go IMHO. – Pavel Denisjuk Jun 04 '17 at 17:14
  • Alongside `react` and `react-dom`, you could also alias `'preact-compat': 'preact-compat/dist/preact-compat'`. That would work as well. – Edy Ionescu Aug 01 '17 at 17:35