react-refresh-webpack-plugin icon indicating copy to clipboard operation
react-refresh-webpack-plugin copied to clipboard

Using with webpack-hot-middleware, issues

Open NaHuGD opened this issue 2 years ago • 0 comments

"react": "18.2.0",
"webpack": "^5.73.0",
"webpack-dev-middleware": "^5.3.3",
"webpack-hot-middleware": "^2.25.1",
"react-refresh": "^0.14.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",

My project utilizes react18 createRoot for rendering and is configured with Node Express(), webpack-dev-middleware, and webpack-hot-middleware. After upgrading from webpack 4 to webpack 5, I faced an issue where the webpack-hot-middleware didn't hot reload the view after API updates. To address this issue, I decided to use the react-refresh-webpack-plugin, which resolved the problem. However, it introduced another issue: after API updates, an error would occur. Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it. I managed to resolve this issue by removing the if (module.hot) { module.hot.accept() } from index.js. Is this a valid solution?

NaHuGD avatar Nov 03 '23 07:11 NaHuGD