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?

Billposter

Because that's new in React 18. – Radicand

@Radicand I am currently using react 17, because of the h3-js-library, which does not work in react 18. How can I still make the app running? – Billposter

The react-dom/client thing is new in v18. Your package.json has you using v17. If you upgrade to v18.0.0, the error should go away. Alternatively, use the older ReactDOM.render way that v17 uses. – Dipeptide

@T.J.Crowder Thank you for your reply. Please add this as an answer. How it should look like using react 17. Thank you. – Billposter

@T.J.Crowder I am using react 17 because of h3-js library as it only works with 17 atm. – Billposter

Do the opposite of reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html – Radicand

@Billposter - I don't think you'll have trouble finding an example if you search for one. :-) Basically: import ReactDOM from "react-dom"; then instead of doing createRoot / root.render, you do ReactDOM.render(JSXHERE, targetElementHere); E.g.: ReactDOM.render(<React.StrictMode><App /></React.StrictMode>, document.getElementById("root")); – Dipeptide

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

Billposter

In my case, it couldn't resolve ./reportWebVitals after pasting in your code. – Quelpart

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. – Lorenzetti

Did you try explicitly upgrading react-dom to 18 as well as react? That worked for me. – Proudhon

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

Padova

This helped me by making me realized I had upgraded react but not react-dom. After running yarn upgrade [email protected] the path is able to resolve. – Proudhon

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

Kinross

... or upgrade it – Flatworm

@Giorgi Digmelashvili Can you please provide answer for React v16.13.1. Your above mentioned solution is not working for me as I have v16 of React. And the restriction is that I can not update the react version as it will change so many things. – Faust

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

Anisole

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

Vestpocket

Awesome, this worked. Guide post: you need not to comment the DOM element and write your own. The exisiting will also work and no need to comment reportWebVitals. Cheers!! – Nest

Thank you this is what i was looking for in React 16 – Alastair

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

Topgallant

Yeah this is work, looks like this is just react 18 way writing the index.js file.. But this file will cause error if you are using react 17 project – Anisole

Answer 7

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

Stepfather

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Nasalize

Answer 8

I had a similar problem and I solved it by adding

 "noImplicitAny": false

on the tsconfig.json

Maighdiln

Answer 9

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

Quintile

Why would be upgrading our react version to 18 ? We want to fix this issue with the current react version. Upgrading to 18 might brings some breaking changes to existing libraries – Nest

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

Curvy

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

Sauceda