Cannot resolve module 'react-dom'

Question

I've seen few posts related to this type of error. But couldn't resolve in mine.

My package.json:

"react": "~0.14.7",
"webpack": "^1.12.13",
"react-hot-loader": "^3.0.0-beta.6",
.
.

I'm getting following error on webpack:

ERROR in ./public/src/main.js
Module not found: Error: Cannot resolve module 'react-dom' in C:\Users\react-example\public\src 
@ ./public/src/main.js 19:16-36

But in the cmd line when I did

npm -v react-dom

I get 3.10.10. react-dom is there. But I wonder why it still gives this error.

When I installed react-dom through npm "npm install react-dom", and run webpack I get following errors:

ERROR in ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react-example/node_modules/react/lib/ReactComponentTreeHook in C:\Users\react-example\node_modules\react-dom\lib
 @ ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js 13:29-72

ERROR in ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react-example/node_modules/react/lib/ReactComponentTreeHook in C:\Users\react-example\node_modules\react-dom\lib
 @ ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js 15:29-72

ERROR in ./~/react-dom/lib/ReactDOMInvalidARIAHook.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react-example/node_modules/react/lib/ReactComponentTreeHook in C:\Users\react-example\node_modules\react-dom\lib
 @ ./~/react-dom/lib/ReactDOMInvalidARIAHook.js 14:29-72

ERROR in ./~/react-dom/lib/ReactDebugTool.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react-example/node_modules/react/lib/ReactComponentTreeHook in C:\Users\react-example\node_modules\react-dom\lib
 @ ./~/react-dom/lib/ReactDebugTool.js 16:29-72

Please help.

This solved it for me: stackoverflow.com/a/47722556/15441

hawkeye
– hawkeye

2019-12-31 12:09:50 +00:00
Commented Dec 31, 2019 at 12:09 — hawkeye
– hawkeye, Commented Dec 31, 2019 at 12:09

Mayank Shukla · Accepted Answer · 2017-09-12 07:34:50Z

59

Issue is react-dom is not installed, when you hit npm -v react-dom, it gives you the version of npm not react-dom version, you can check that by using npm -v or npm -v react-dom both will give you the same result. You are checking the package version incorrectly.

How to install react and react-dom properly?

Use this to install react and react-dom:

npm install react react-dom --save

After that, you can check your package.json file, if react and react-dom has been installed correctly, you will find an entry for that.

How to check install package version?

To check all the locally installed packages version:

npm list

For globally installed packages, use -g also:

npm list -g

To check the version of any specific package, specify the package name also:

npm list PackageName

For Example =>
   npm list react
   npm list react-router

After installation your package.json will look like this:

{
  "name": "***",
  "version": "1.0.0",
  "main": "***",
  "scripts": {
     ....
  },
  "repository": {
     ....
  },
  "keywords": [],
  "author": "",
  "dependencies": {
    ....
    "react": "^15.4.2",          //react
    "react-dom": "^15.4.2",      //react-dom
     ....
  },
  "devDependencies": {
     ....
  }
}

Latest version of react-dom is : 15.4.2

Reference: https://www.npmjs.com/package/react-dom

edited Sep 12, 2017 at 7:34

answered Mar 3, 2017 at 9:09

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

User1230321 Over a year ago

I said in the question that after I install react-dom, I get those errors. Same is the case now.

Milena · Accepted Answer · 2019-09-04 15:28:02Z

33

In my case I had an alias in my webpack.config.common.js:

 resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
  },

I just removed this line:

'react-dom': '@hot-loader/react-dom',

and it was fixed.

answered Sep 4, 2019 at 15:28

Milena

9961 gold badge9 silver badges18 bronze badges

4 Comments

Michael Cox Over a year ago

Or make sure @hot-loader/react-dom is installed.

Ben Over a year ago

so then you can't benefit from @hot-loader

Shawn Erquhart Over a year ago

This will happen more as folks switch to react-refresh.

Paweł Andruszków Over a year ago

I love you bro, I was searching and searching for solution.. it was so simple to fix, but so hard to find, thanks!

Djesu · Accepted Answer · 2018-06-19 03:06:16Z

6

I used 'npm update' and that solved my problem.

answered Jun 19, 2018 at 3:06

Djesu

1171 silver badge6 bronze badges

Comments

ATOzTOA · Accepted Answer · 2019-06-03 17:33:15Z

5

In my case, it was an alias I had in my webpack.conf, which was looking for @hot-loader/react-dom.

answered Jun 3, 2019 at 17:33

ATOzTOA

36.1k23 gold badges101 silver badges119 bronze badges

Comments

Kankuro · Accepted Answer · 2017-09-16 05:22:11Z

4

For anybody reading this that wasn't able to figure it out. I had the same issue which I ended up resolving by installing the "react-router" package which is simply running the following command

npm i react-router-dom --save for a browser app.

npm i react-router-native for a native app.

answered Sep 16, 2017 at 5:22

Kankuro

3053 silver badges11 bronze badges

Comments

Jaden · Accepted Answer · 2022-07-18 14:49:59Z

2

You can also try to solve this issue by updating your react react-dom module, try npm install react@latest react-dom@latest.

answered Jul 18, 2022 at 14:49

Jaden

3221 gold badge7 silver badges16 bronze badges

Comments

Kevin Reilly · Accepted Answer · 2019-04-12 00:40:42Z

1

You may need to update react and react-dom. Despite react-dom actually being installed, I was having this issue on ^15.5.4 and it went away with ^16.8.6:

$ # update the react and react-dom modules
$ yarn add react react-dom

Ensure that the two version match exactly in package.json:

"react": "^16.8.6",
"react-dom": "^16.8.6",

Delete yarn.lock, node_modules, and yarn again.

rm -Rf yarn.lock node_modules && yarn

edited Apr 12, 2019 at 0:40

answered Apr 12, 2019 at 0:27

Kevin Reilly

6,2622 gold badges27 silver badges19 bronze badges

Comments

Ayesha O. · Accepted Answer · 2018-06-22 20:59:37Z

0

Try rm -rf node_modules && yarn or rm -rf node_modules && npm install if you use npm instead of yarn.

answered Jun 22, 2018 at 20:59

Ayesha O.

1

Comments

sme · Accepted Answer · 2018-11-07 06:16:33Z

0

My particular issue for getting this error:

ERROR in ./src/index.js Module not found: Error: Can't resolve 'eact-dom' in 'C:\Users\Jose\Desktop\woz-u-React\React-Course\react-lesson-one\src' @ ./src/index.js 2:0-32 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js

To fix this issue, I had to unzip the folder before installing.

edited Nov 7, 2018 at 6:16

sme

4,1834 gold badges30 silver badges45 bronze badges

answered Nov 7, 2018 at 1:44

Jose Salazar

1

Comments

Farzana Khan · Accepted Answer · 2019-12-02 11:06:26Z

0

The following command will resolve the problem.

npm install react react-dom --save

answered Dec 2, 2019 at 11:06

Farzana Khan

2,2551 gold badge12 silver badges9 bronze badges

Comments

James Gentes · Accepted Answer · 2021-04-16 02:07:21Z

0

For those using Parcel, this can occur if you are targeting Node for a browser-based app.

There are 3 ways Parcel will infer this from your package.json:

Remove node as the target, or specify the --target as browser at the command line.

Also see:

answered Apr 16, 2021 at 2:07

James Gentes

8,22610 gold badges48 silver badges66 bronze badges

Comments

vapcguy · Accepted Answer · 2025-04-09 16:04:10Z

You can try, as others have mentioned:

npm install react react-dom --save

But chances are you want a specific version, so:

npm install [email protected] --force --save
npm install [email protected] --force --save

But this is only part of the story. I had a similar error on a Kendo package that needed react-dom and had it as a dependency. webpack here obviously does, too. To resolve my error, I had to downgrade my version of the Kendo packages so it would use the 17.0.2 versions of react and react-dom I had loaded (I didn't want to go to 18 or 19 yet).

So it's not always just a case of just installing the latest react and react-dom and "let 'er rip!". Maybe your codebase can't handle it. Maybe the dependency of another package, like webpack needs a certain version of react and react-dom and can't handle the version you installed. You would go into the node_modules folder to the offending package, in this case webpack, and then open the package.json there in Notepad. Look at its dependencies for what version of react and react-dom it needs and install that. Or upgrade/downgrade webpack to the proper version that has your react and react-dom version you want to use as its dependency.

Eric Aya · Accepted Answer · 2021-07-19 12:35:54Z

-2

Your app is pointing to the global version of react hence you need install it manually using global keyword. You can also compare your installed version of react-dom in package.json of your current project and globally installed react-dom version using command npm -v react-dom if both are different then manually install react dom using command:

sudo npm install -g [email protected]

edited Jul 19, 2021 at 12:35

Eric Aya

70.2k36 gold badges190 silver badges266 bronze badges

answered Jul 19, 2021 at 12:27

Aniket

1471 silver badge11 bronze badges

Collectives™ on Stack Overflow

Cannot resolve module 'react-dom'

13 Answers 13

1 Comment

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

1 Comment

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related