Cannot resolve module 'react-dom'

问题

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.

回答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

回答2:

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.

回答3:

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.

回答4:

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

回答5:

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

回答6:

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

回答7:

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

回答8:

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.