reactjswebpackreact-domreact-hot-loader

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.


Solution

  • 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