How can I enable Hot Module Replacement(HMR) in react?

Question

Does the create-react-app come with built-in support for HMR? I have seen react app reloads on changes. But that's not HMR. What webpack configuration I need to add to enable HMR. I read online about setting hot option in webpack-dev-serve to true. I'm confused about HMR in react.

After searching for a while I came across this

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'

// Opt-in to Webpack hot module replacement
if (module.hot) module.hot.accept()

ReactDOM.render(
  ,
  document.getElementById('app')
)

Then it says to add HotModuleReplacementPlugin in webpack.config.js
Do I need to manually add it or it comes pre-added. Also I read that react uses ReactRefreshWebpackPlugin. I'm confused please help.

user_6343202 · Answer

You can find the answer for your question here: https://www.youtube.com/watch?v=f-ctxG2qEps&t=279s

If you want to config HMR from scratch, take a look at this: https://github.com/pmmmwh/react-refresh-webpack-plugin/

Don't forget to add this line into devServer:

devServer: {
    hot: true,
    liveReload: false,
},

For a working example, take a look at this repo: https://github.com/matheus4lves/react-pagination

How can I enable Hot Module Replacement(HMR) in react?

1 Answers