`module.hot.invalidate` is not a function

I am trying this plugin with webpack-dev-server. I followed the instructions to add this plugin to code and also checked example in webpack-dev-server in examples directory.

This is my devServer config:

    devServer: {
      host: '0.0.0.0',
      historyApiFallback: true,
      hot: true,
      clientLogLevel: 'info',
      inline: true,
      liveReload: false,
      overlay: true,
      port: 8080,
    },

I am also using following code snippet to use HMR:-

if (module.hot) {
    module.hot.accept('./app', () => {
     const App = require('./app').default
     ReactDOM.render(<App />, root);
})
}

After adding the plugin to my webpack.config.js, I changed the label text of Input component. (The input component and the component in which it is used both are functional components). I am getting following error:-

TypeError
module.hot.invalidate is not a function

Call Stack
 Object.eval
  //path of component
 eval
  //path of component
 Object..//path of component
  58.009bff0c7f3cf3782d9f.hot-update.js:6:1
 __webpack_require__
  main.js:794:31
 hotApply
  main.js:710:14
 undefined
  main.js:364:22

[pmmmwh]

Below is an example how I write my components most of the time. Will it work if I do changes in presentational.js?

It should be fine - state should be preserved without any problems. If you do hit anything though, you might have to report to Redux instead because it’s most likely that they are “incompatible” with React’s internals.

(I haven’t used connect in a while and I assume it does follow the PascalCase rule for component names within it’s internals)

[pmmmwh]

@pmmmwh Thanks. Adding the --hot flag worked for me. But I have one question that I have hot: true in my devServer config in webpack. Do I still need to pass this flag?

It is a tiny bit different - devServer config flags are only read by WDS but not Webpack - so when you create dev builds it won’t kick into action.