score:10

Accepted answer

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.


Related Query

More Query from same tag