Does not work with React.lazy

[magic-m-johnson]

deps

    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "core-js": "^3.6.5",
    "html-webpack-plugin": "^4.5.0",
    "react": "^16.13.1",
    "react-dom": "npm:@hot-loader/react-dom",
    "regenerator-runtime": "^0.13.7",
    "webpack": "^5.1.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0"

babel.config

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

webpack.config

const html = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',
  plugins: [new html()],
  module: {
    rules: [{
      loader: "babel-loader",
      exclude: /node_modules/,
      test: /\.jsx?$/
    }]
  }
}

index.js

import 'core-js/stable'
import 'regenerator-runtime/runtime'
import React, { lazy, Suspense } from 'react'
import { render } from 'react-dom'

const Lazy = lazy(() => import('./lazy'))

render(<Suspense fallback={null}><Lazy /></Suspense>, document.body)

error:

[theKashey]

npm:@hot-loader/react-dom is actually react-dom@17. Please use an explicit version matching your major React one.

[magic-m-johnson]

thanks that helped.

I also added

    {
        test: /\.jsx?$/,
        include: /node_modules/,
        use: 'react-hot-loader/webpack',
      }

to my webpack config since i got the react-dom patch not detected warning, but now when I change something in a node_module it says "nothing changed".
I even added the modules i want to watch for changes to the webpack config watchOptions.