react-refresh-webpack-plugin: `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

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 19 (9 by maintainers)

Most upvoted comments

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 on Aug 7, 2020

@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.

pmmmwh on Aug 10, 2020

What does it mean? I mean in a build, this shouldn’t be thing, right?

We don’t know if you are in a build or in a development server. Just enable --hot and it would be fine. Or else disable the babel plugin and this plugin when you create builds.

pmmmwh on Aug 8, 2020

I’ll close this issue since there’s a resolution, but I’ll still answer any further questions here 😉

pmmmwh on Aug 7, 2020

@pmmmwh Nope, I am using following simple functional component and only rendering that.

This is really strange - I’ve just created a project with the exact same Webpack config and stuff ran smoothly for me. What version of react-dom are you on?

pmmmwh on Aug 7, 2020