0

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: enter image description here

Have any of you gotten this before? I've been Googling all day and haven't found anything...

Ruben Martinez Jr.
  • 3,199
  • 5
  • 42
  • 76

1 Answers1

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);
}
Jason Miller
  • 2,294
  • 1
  • 16
  • 14