[Fix] Module Not Found Error Can't Resolve 'react-dom/client' 2023

Recently when I was coding in react and when I tried to run my app I got an unexpected error; Module not found: Error: Can’t resolve ‘react-dom/client’. A snippet of the error I got is given below:

Module not found: Error: Can't resolve 'react-dom/client' in '/home/Desktop/Code/demo_app/src'

I would like to share the steps that helped me to fix the error; Module not found: Error: Can’t resolve ‘react-dom/client’.

Why Module not found Error Can’t resolve ‘react-dom/client’ error is seen?

The error, Module not found: Error: Can’t resolve ‘react-dom/client’, is seen because you still have the previous outdated versions of “react” and “react-dom” installed in the dependencies of your project file.

If you have the latest version of React installed and you are still facing difficulties it is most likely that your index.js has been affected or changed.

A simple solution to fix this would be to first update your react version and if the error still persists then change your index.js, so the error is no longer displayed.

A detailed solution to fix the Module not found: Error: Can’t resolve ‘react-dom/client’ error is provided below:

How to fix Module not found: Error: Can’t resolve ‘react-dom/client’ error?

A simple solution to fix this would be to first update your react version and if the error still persists then change your index.js, so the error is no longer displayed.

To resolve the error Module not found: Error: Can’t resolve ‘react-dom/client’ you must follow the below steps.

Depending on if you are using React 17 or React 18 there are below two solutions:

Method 1: Change your index.js for React 17

You are always recommended to upgrade your React version if you are using an older version, but if for some reason you are forced to use React 17, there is a fix for your problem. You will have to change your index.js as mentioned below:


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
 document.getElementById('root')
);

Method 2: Change your index.js for React 18

if You are using React 18, and you are still facing an error, you will have to change your index.js file to the as mentioned below:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

 <React.StrictMode>
   <App />
 </React.StrictMode>
);

For react 18 if the problem still persists you may have to consider downgrading your project to React 17 and using method 1. You can downgrade your project to React 17 by using the below-mentioned code.

npm install react@17 react-dom@17

For your typescript projects:

npm install react@17 @types/react@17 react-dom@17 @t

Conclusion

To fix the Module not found: Error: Can’t resolve ‘react-dom/client’ error; you have to first update your react version, and if the error still persists then change your index.js depending on your react version, so the error is no longer displayed.