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
demo_app@0.1.0 /home/Desktop/Code/demo_app
├── @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-dom@17.0.1
├── react-leaflet@3.0.2
├── react-scripts@5.0.1
├── react@17.0.1
└── web-vitals@2.1.4

Any suggestions why I have problems compiling my application?

@jonrsharpe 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? — Carol.Kar, Apr 18 '22 at 15:21
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. — T.J. Crowder, Apr 18 '22 at 15:21
@T.J.Crowder Thank you for your reply. Please add this as an answer. How it should look like using react 17. Thank you. — Carol.Kar, Apr 18 '22 at 15:22
@T.J.Crowder I am using `react 17` because of `h3-js` library as it only works with `17` atm. — Carol.Kar, Apr 18 '22 at 15:23
Do the opposite of https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html — jonrsharpe, Apr 18 '22 at 15:24
@Carol.Kar - 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(, document.getElementById("root"));` — T.J. Crowder, Apr 18 '22 at 15:27

score 77 · Accepted Answer · edited Apr 19 '22 at 10:03

77

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

edited Apr 19 '22 at 10:03

jonrsharpe

115,751
26
228
437

answered Apr 18 '22 at 15:47

Carol.Kar

4,581
36
131
264

1

In my case, it couldn't resolve `./reportWebVitals` after pasting in your code. – aluuusch Jun 15 '22 at 13:29
3

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. – yevt Aug 08 '22 at 17:49
Did you try explicitly upgrading react-dom to 18 as well as react? That worked for me. – Adam Sep 07 '22 at 23:05

score 36 · Answer 2 · answered May 11 '22 at 18:53

36

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

delete these two lines:

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

Replace them with:

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

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

answered May 11 '22 at 18:53

Boshra Jaber

566
1
6
16

2

This helped me by making me realized I had upgraded react but not react-dom. After running `yarn upgrade react-dom@18.0.0` the path is able to resolve. – Adam Sep 07 '22 at 22:58

score 21 · Answer 3 · answered May 18 '22 at 21:42

21

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

answered May 18 '22 at 21:42

Giorgi Digmelashvili

263
2
6

1

... or upgrade it – benek Sep 07 '22 at 07:36
@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. – rocco Nov 18 '22 at 10:50

score 21 · Answer 4 · answered Jun 16 '22 at 08:26

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

score 2 · Answer 5 · answered Aug 17 '22 at 11:57

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

score 2 · Answer 6 · answered Aug 25 '22 at 19:04

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

score 1 · Answer 7 · answered May 28 '22 at 12:26

1

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

answered May 28 '22 at 12:26

Bhanu Sharma

111
2
10

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 – DanteDX Jun 16 '22 at 08:27

score 1 · Answer 8 · answered Jul 10 '23 at 14:46

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 react-dom@18.2.0**
.
.
.
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".

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](/help/how-to-answer). — Community, Jul 12 '23 at 08:29

score 0 · Answer 9 · answered May 10 '22 at 06:33

0

I had a similar problem and I solved it by adding

 "noImplicitAny": false

on the tsconfig.json

answered May 10 '22 at 06:33

Asabeneh

17
5

score 0 · Answer 10 · answered Jan 30 '23 at 21:04

0

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

answered Jan 30 '23 at 21:04

vancy-pants

1,070
12
13

score 0 · Answer 11 · answered Mar 30 '23 at 08:47

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

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

11 Answers11

React 17 example:

React 18 example:

Linked