title: Webpack Hot module replacement, react 18 ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before
body: <p>I updated React to v18 and my Webpack dev server gives me a console error whenever the hot module replacement fires and injects the new javascript code:</p>
  <p><code>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.</code></p>
  <p><code>index.js</code> file</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App.jsx';
  
  const container = document.getElementById('root');
  const root = ReactDOM.createRoot(container);
  
  root.render(&lt;App /&gt;);
  
  if (module.hot) module.hot.accept(function (err) {
      console.log('An error occurred while accepting new version');
  });
  </code></pre>
  <p>webpack.config.js</p>
  <pre><code>const path = require('path');
  const HtmlWEbpackPlugin = require('html-webpack-plugin');
  
  module.exports = (env) =&gt; {
    let cfg = {
      mode: 'development',
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.[contenthash:6].js',
        publicPath: '/',
        clean: true
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader'
            }
          },
        ]
      },
      plugins: [new HtmlWEbpackPlugin({ template: './src/index.html' })
      ],
      devServer: {
        static: {
          directory: path.join(__dirname, 'public'),
        },
        compress: true,
        port: 3000,
        hot: true,
        open: true,
        
      },
      performance: {
        hints: false
      }
  
    }
  
    return cfg;
  };
  </code></pre>