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

Question

I am using react with the following packages:

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.0.1",
    "@testing-library/user-event": "^13.5.0",
    "h3-js": "^3.7.2",
    "leaflet": "^1.7.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-leaflet": "3.0.2",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

My index.js looks like the following:

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

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

reportWebVitals();

My App.js is like the following:

import React from "react";
import { render } from "react-dom";
import LeafletMap from "./Map";

class App extends React.Component {
  state = { resolution: 8, kRing: 0 };

  constructor(props) {
    super(props);
    this.state = { resolution: 8, kRing: 0 };
  }

  render() {
    return (
      <div>
        <LeafletMap
          resolution={this.state.resolution}
          kRing={this.state.kRing}
        />
        Resolution:
        <input
          type="number"
          min={0}
          max={15}
          onChange={this.onChangeResolution}
          defaultValue={8}
        />
        <br />
        K Rings:
        <input
          type="number"
          min={0}
          max={100}
          onChange={this.onChangeKRings}
          defaultValue={0}
        />
      </div>
    );
  }

  onChangeResolution = (e) => {
    this.setState({ resolution: Number.parseInt(e.target.value) });
  };
  onChangeKRings = (e) => {
    this.setState({ kRing: Number.parseInt(e.target.value) });
  };
}

export default App;

When I run my app with npm run start I get the following error:

Compiled with problems:X

ERROR in ./src/index.js 5:0-40

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

I reinstalled all packages and its also listed in npm list:

>  npm list
[email protected] /home/Desktop/Code/demo_app
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Any suggestions why I have problems compiling my application?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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.**

Answer 6

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

Answer 7

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

Answer 8

ReactDOM.render is no longer supported in React 18. Use createRoot instead. 
Until you switch to the new API, your app will behave as if it’s running React 
17.
LINK :https://reactjs.org/link/switch-to-createroot


// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); 
root.render(<App tab="home" />);

upgrade react-dom to 18.2.0 using **npm i [email protected]**
.
.
.
If this don't work make sure react and react-dom packages should be downloaded 
as same version for ex:   "react": "^18.2.0",
                          "react-dom":"^18.2.0",
                                     or
                          "react": "^17.2.0",
                          "react-dom":"^17.2.0".

Answer 9

I had a similar problem and I solved it by adding

 "noImplicitAny": false

on the tsconfig.json

Answer 10

My issue was the types packages not being upgraded as well. I had to update the @type imports for the new react and react-dom packages.

yarn add @types/react @types/react-dom

Answer 11

I met this error when I use npm-check-updates to upgrade React version.

Note:

only modifies package.json file. Run npm install to update your installed packages and package-lock.json.

I forget to run npm install, the React version is still old (16.14.0).

So, after upgrading the package version using commands like:

$ ncu -f react -u

We still need to run npm install to update the installed packages in node_modules.

You can use npm ls react --depth=0 to check the installed React's version