"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

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 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.