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

user_8419500 0
Viewed 348

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:

From

To:

To

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

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

```

react-dom webpack reactjs
1 Answers

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',
  },
},
user_84195000
Related