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.

Garibald

This solved it for me: https://mcmap.net/q/370271/-webpack-react-typescript-module-not-found-in-node_modules-react – Refugia

Answer 1

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

Hutner

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

Answer 2

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.

Mariel

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

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

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

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

Answer 3

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

Beadle

Answer 4

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

Reamer

Answer 5

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.

Paly

Answer 6

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

Hollis

Answer 7

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

Marco

Answer 8

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

Connotation

Answer 9

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.

Quarterly

Answer 10

The following command will resolve the problem.

npm install react react-dom --save

Forestforestage

Answer 11

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:

• https://v2.parceljs.org/getting-started/migration/
• https://v2.parceljs.org/configuration/package-json/

Declinometer

Answer 12

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]

Dion