Webpack 2 HMR on Preact App - reactjs

Question

I'm trying to setup Hot Module Reloading with Webpack 2 and Preact. It's "working", in that it's reloading the entire contents of the app every reload, but I'm getting errors between hot reloads (and I think that's why individual components aren't the only thing reloading).
Here's the relevant parts of my webpack setup:
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.NamedModulesPlugin(),
//etc.
],
entry: [
'webpack-dev-server/client?'+DEV_SERVER,
'webpack/hot/only-dev-server',
'./dev/jsx/index.jsx'
],
devServer: {
hot: true,
inline: true,
contentBase: path.join(__dirname, '/'),
publicPath: '/'
}
My index.jsx file looks like:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './AppProvider.jsx';
const renderApp = () => {
ReactDOM.render(<App/>, document.getElementById('root'));
};
renderApp();
if (module.hot) {
module.hot.accept();
module.hot.accept('./AppProvider.jsx', renderApp);
}
When I make a change in any of the project files, the app contents reload and I get the following errors:
Have any of you gotten this before? I've been Googling all day and haven't found anything...

Answer 1

You're rendering the old AppProvider module, which is null when HMR kicks in. You'll need to move the require()/import for AppProvider.jsx into your HMR handler as shown here.
import React from 'react';
import ReactDOM from 'react-dom';
const renderApp = () => {
let App = require('./AppProvider.jsx');
App = App.default || App; // if you're using ES Modules
ReactDOM.render(<App/>, document.getElementById('root'));
};
renderApp();
if (module.hot) {
module.hot.accept('./AppProvider.jsx', renderApp);
}