"找不到模块:错误:无法解析模块'react/lib/ReactMount'"

Question

我使用Reactjs和webpack来启动一个项目,当我在命令提示符下运行"node server"时,会出现如下错误:

Chrome浏览器开放成功但也存在如下问题:

github是:(github.com/Yangqin0607/gallery)

这是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

此问题与react-hot-loader包有关.您正在使用依赖于ReactMount.js文件node_modules/react/lib夹中存在的文件的旧版本.

没有简单的单向修复方法,但您有几个选项:

1. 请尝试按照此处的说明操作:https://github.com/gaearon/react-hot-loader/blob/v3.0.0-beta.6/docs/README.md#usage-with-external-react(但我有到目前为止一直不走运)

2. 删除热重新加载器以进行响应(在webpack.config删除'react-hot'加载器时)

3. 将react-hot-loader软件包更新到版本3(以下是如何操作:https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915).但是请注意,这个软件包已经在alpha版本中使用了一段时间......

4. 将您的反应版本回滚到包含ReactMount.jslib文件夹中的版本(15.0.1用于使该文件在停止时不确定).

更新: React Hot Loader 3目前处于测试阶段,提供更全面的升级指南:https://github.com/gaearon/react-hot-loader/tree/v3.0.0-beta.7/docs#migration-to-30

Answer 2

上述解决方案均不适合我.剩下的时间用在github问题/评论的兔子洞里,权衡各种hacky变通办法的利弊/可行性.

最简单,最简单的,"我只是想解决我打算在今天工作的原始问题"修复程序对我来说起作用来自:https://github.com/gaearon/react-hot-loader/issues/417# issuecomment-261548082

在您的webpack配置中,将以下别名添加到该resolve部分:

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

这不是一个稳定的长期修复,这只是一个开发修复,因此您可以继续开发而不必被迫处理升级问题.

我仍然不能100%确定为什么我在我的应用程序中看到这个问题,而不是另一个应用程序,两者都是从fountain.jsreact-redux生成器生成并且具有相同的package.json.

Answer 3

您正在使用一个react-hot-loader使用内部反应API 的过时包react\lib\ReactMount.现在反应不允许这样的问题.

尝试将其更新到最新版本:

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