Ailsa Ailsa - 1 year ago 370
React JSX Question

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

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:

enter image description here

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

enter image description here

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 Source

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/master/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).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download