Custom webpack configuration: Module not found: Error: Can't resolve 'react-dom/client' in 'D:\web development\react\webpack-react-boilerplate\src'

Question

I have my custom webpack configuration for react, here is the link of my repository: https://github.com/react-custom-projects/webpack-react-boilerplate

I'm trying to upgrade react and react-dom from v17 to v18 but after trying to update my index.jsx file from:

To:

I get the error of module not found (react-dom/client).

Here's the versions of react && react-dom in package.json:

Answer 1

Solved:

The issue was that I’m using @hot-loader/react-dom && react-hot-loader which is not supported in react 18. React 18 supports fast refresh which is more efficient and used by create-react-app

Steps done to solve the issue:

• Package.json:

  a- Remove @hot-loader/react-dom && react-hot-loader

  b- Add @pmmmwh/react-refresh-webpack-plugin && react-refresh

• App.jsx:

  a- Remove hot loader

• Babel.config.js:

  a- Enable fast refresh in development: ...(!api.env('production') && ['react-refresh/babel']),

• Webpack.dev.js:

  a- Enable hot reloading in devServer:
  devServer: { //enable hot reloading hot: true,

  b- Import react refresh plugin: const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

  c- Add it in the plugins array: plugins: [ // enables fast refresh new ReactRefreshWebpackPlugin(), ],

  d- Remove alias for react dom hot loader:

resolve: {
  alias: {
    'react-dom': '@hot-loader/react-dom',
  },
},