"module not found : Error: Cannot resolve module 'react/lib/ReactMount' "

Question

I used Reactjs and webpack to start a project, and when I run the "node server" in the command prompt, there is an error like this:

And the chrome explorer opened successful but also have problems as follows:

The github is: (github.com/Yangqin0607/gallery)

Here is the package.json

    {
  "private": true,
  "version": "0.0.1",
  "description": "YOUR DESCRIPTION - Generated by generator-react-webpack",
  "main": "",
  "scripts": {
    "clean": "rimraf dist/*",
    "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
    "dist": "npm run copy & webpack --env=dist",
    "lint": "eslint ./src",
    "posttest": "npm run lint",
    "release:major": "npm version major && npm publish && git push --follow-tags",
    "release:minor": "npm version minor && npm publish && git push --follow-tags",
    "release:patch": "npm version patch && npm publish && git push --follow-tags",
    "serve": "node server.js --env=dev",
    "serve:dist": "node server.js --env=dist",
    "start": "node server.js --env=dev",
    "test": "karma start",
    "test:watch": "karma start --autoWatch=true --singleRun=false"
  },
  "repository": "",
  "keywords": [],
  "author": "Your name here",
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-eslint": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.5.0",
    "bower-webpack-plugin": "^0.1.9",
    "chai": "^3.2.0",
    "copyfiles": "^1.0.0",
    "css-loader": "^0.23.0",
    "eslint": "^3.0.0",
    "eslint-loader": "^1.0.0",
    "eslint-plugin-react": "^6.0.0",
    "file-loader": "^0.9.0",
    "glob": "^7.0.0",
    "isparta-instrumenter-loader": "^1.0.0",
    "karma": "^1.0.0",
    "karma-chai": "^0.1.0",
    "karma-coverage": "^1.0.0",
    "karma-mocha": "^1.0.0",
    "karma-mocha-reporter": "^2.0.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sourcemap-loader": "^0.3.5",
    "karma-webpack": "^1.7.0",
    "minimist": "^1.2.0",
    "mocha": "^3.0.0",
    "null-loader": "^0.1.1",
    "open": "0.0.5",
    "phantomjs-prebuilt": "^2.0.0",
    "react-addons-test-utils": "^15.0.0",
    "react-hot-loader": "^1.2.9",
    "rimraf": "^2.4.3",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.0",
    "webpack-dev-server": "^1.12.0"
  },
  "dependencies": {
    "core-js": "^2.0.0",
    "normalize.css": "^4.0.0",
    "react": "^15.0.0",
    "react-dom": "^15.0.0"
  }
}

Answer 1

For me it was an old version of react-dom.

I changed versions of react and react-dom to 16.X (to be exact : "react": "16.13.1", "react-dom": "16.13.1",), and then this problem went away for me.

Answer 2

There are two issues at play:

1. Properly upgrading all your dependencies, and,
2. Use webpack v. 3.11.0, DO NOT upgrade to webpack v. 4.00,
3. Downgrade ReactJS to React v. 15.6.2.

Open package.json, which will have a list of things like...

"dependencies": {
  "jquery": "^3.2.1",
  "jquery-ui": "^1.12.1",
  "react": "^15.6.1",
  "react-dom": "^15.6.1",
  "react-scripts": "1.0.10",
  "webpack": "^3.6.0"
  (etc.)

Then run a command like this in your package base directory, which has the same dependencies as listed above...

sudo npm install --save react@15.6.2 react-dom@15.6.2 react-scripts@latest webpack@3.11.0 jquery@latest jquery-ui@latest

TLDR ANSWER : ^^^ This is the one command you'll actually need to run.

Notice the webpack-specific version.

After this, everything worked for me! I I checked the ReactJS version , using this answer , https://stackoverflow.com/a/36994601/2430549 , and my package.json now looks like...

"dependencies": {
  "jquery": "^3.3.1",
  "jquery-ui": "^1.12.1",
  "react": "^16.4.0",
  "react-dom": "^16.4.0",
  "react-hot-loader": "^4.2.0",
  "react-scripts": "^1.1.4",

Source: Answer by JanTheHun, https://github.com/angular/angular-cli/issues/9793

Answer 3

This issue is related to the react-hot-loader package. You are using an old version that relies on the ReactMount.js file being present in the node_modules/react/lib folder.

There is no easy one way fix for that but you have a few options which are:

1. Try to follow the instructions here: https://github.com/gaearon/react-hot-loader/blob/v3.0.0-beta.6/docs/README.md#usage-with-external-react (but I have been unlucky so far)

2. Remove the hot reloader for react (in your webpack.config remove the 'react-hot' loader)

3. Update the react-hot-loader package to version 3 (here is how to do so: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915). But note that this package has been in alpha for a while now...

4. Rollback your react version to one that includes the ReactMount.js in the lib folder (15.0.1 used to have this file not sure when it stopped).

Update: React Hot Loader 3 is now in beta with a more comprehensive upgrade guide: https://github.com/gaearon/react-hot-loader/tree/v3.0.0-beta.7/docs#migration-to-30

Answer 4

I had the same problem and none of the solution worked. It then occurred to me that it seems that react is missing. I got the problem after I installed and uninstalled a package for postgreSQL.

So I added it. PS, I was using yarn

yarn add react

Answer 5

Updating react-hot-loader didn't work for me, but removing the react-hot form the loaders list, by simply commenting it, fixed the issue:

{
    test: /\.js$/,
    exclude: /node_modules/,
    loaders: [
        // 'react-hot',
       'babel'
    ]
}

Answer 6

None of the above solutions worked for me. Spent the rest of the day in a rabbit hole of github issues/comments, weighing the pros/cons/feasibility of various hacky workarounds.

The quickest, simplest, "I just want to work on the original problem I intended to work on today" fix that worked for me comes from: https://github.com/gaearon/react-hot-loader/issues/417#issuecomment-261548082

In your webpack config, add the following alias to the resolve section:

resolve: {
  alias: { 'react/lib/ReactMount': 'react-dom/lib/ReactMount' }
}

This is not a stable long term fix, this is a development only fix so you can continue developing without being forced to deal with upgrade issues out of the blue.

I'm still not 100% sure why I'm seeing this problem in my one app and not another, both were generated from fountain.js react-redux generator and have identical package.json.

Answer 7

Many thanks to cheesemacfly, I was able to solve the same issue with your suggestion to remove 'react-hot' from the loader.

{
    test: /\.(js|jsx)$/,
    loaders: ['react-hot', 'babel'],
    exclude: /(node_modules|lib\/ckeditor)/
}

I Changed to:

{
    test: /\.(js|jsx)$/,
    loader: 'babel',
    exclude: /(node_modules|lib\/ckeditor)/
}

Remember to change the word 'loaders' to 'loader' since you are no longer referencing a list.

Answer 8

Thank you for all your answers. I have solved my problems.

" This issue is related to the react-hot-loader package. You are using an old version that relies on the ReactMount.js file being present in the node_modules/react/lib folder." said by cheesemacfly.

So here is the solution for me: 1) updating the react-hot-loader to the latest version

npm install --save-dev react-hot-loader@latest

but here is another problem linked with react-hot-loader

2) so I removed the react-hot-loader from 'cfg/dev.js' change the code

loader: 'react-hot!babel-loader'

into

loader: 'babel-loader'

Answer 9

You are using an outdated react-hot-loader package that uses the internal react api throught react\lib\ReactMount. Now react doesn't allow this hence the problem.

Try updating it to the latest version:

$ npm install --save-dev react-hot-loader@latest

Answer 10

This is probably just a dependency issue. It's either not getting the correct version of react or not installing it correctly.

# update npm
$ npm install -g npm

# reinstall the generator-react-webpack package (note the global tags)
$ npm install -g yo
$ npm install -g generator-react-webpack

Then attempt to generate your app.