Module not found: Error: Can't resolve 'react-dom/client'

The final solution that worked for me was simply to change the React 18 index.js file to the following:

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();

You still have the older versions of "react" and "react-dom" in your dependencies. To solve it:

1. delete these two lines:

    "react": "^17.0.1",
    "react-dom": "^17.0.1",

2. Replace them with:

    "react": "^18.1.0",
    "react-dom": "^18.1.0",

3. delete the "node_modules" folder
4. do npm install This should solve your issue and update your app to react18

You might need to downgrade React and react-dom, here is index.js:

React 17 example:

import React from "react";
import { render } from "react-dom";
import "./index.css";
import App from "./App";

const root = document.getElementById("root");
render(<App />, root);

React 18 example:

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>
);

In summary, if you are using React 17 (My version was 17.0.2), you index.js will have to be like the following,

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

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

if You are using React 18, your index.js file should looks like the following

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>
);

I was facing problem, when I downgraded my react 18 project to react 17 project. i used,

npm install react@17 react-dom@17

For typescript project,

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

I had a similar problem and I solved it by adding

 "noImplicitAny": false

on the tsconfig.json

For react version 18.1 (with typescript), this works for me

    import React from "react";
    import { createRoot } from "react-dom/client";
    import reportWebVitals from "./reportWebVitals";
    import App from "./App";
    const root = createRoot(
        document.getElementById("root") as HTMLElement
    );
    root.render(
       <React.StrictMode>
          <App />
       </React.StrictMode>
    );
    reportWebVitals();

Ok! Firstly this is what I did. I experienced this problem on React ^16.14.0. I removed the 'client' from 'import ReactDOM from "react-dom/client" in my index.js file. I also commented out the

    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
    <React.StrictMode>
    <App />
    </React.StrictMode>
    );

that was there and used

  ReactDOM.render(
    <App />,
  document.getElementById("root")
);

instead. Also, commented out

import reportWebVitals from "./reportWebVitals"; and reportWebVitals();

also. After doing this your code should compile successfully.**

A simple solution to fix this would be to first update your react version. Change your index.js for React 18.

Open your terminal in your project's root directory and run the following command:

npm install react-dom@latest react@latest

After installed React 18, if 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>
);

If you're from here from react-router's tutorial on stackblitz.com, you can do the following:

1. Remove package-lock.json
2. Update package.json (change 17 to 18):

{
  "name": "tutorial",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "history": "^5.2.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "6.0.0-beta.8"
  },
  "devDependencies": {
    "@rollup/plugin-replace": "^2.2.1",
    "@types/node": "14.x",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^1.0.1",
    "typescript": "^4.3.5",
    "vite": "^2.5.0"
  }
}

3. npm install

The problem is React version mismatch. React-router tutorial uses React v18+, while the template on stackblitz.com is configured to use React v17