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

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

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:
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)
Remove the hot reloader for react (in your webpack.config remove the 'react-hot' loader)
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...
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 2

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 3

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 4

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 5

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 6

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.

Answer 7

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 8

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 9

There are two issues at play:
Properly upgrading all your dependencies, and,
Use webpack v. 3.11.0, DO NOT upgrade to webpack v. 4.00,
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 10

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.