“找不到module:错误:无法解析module‘react/lib/ReactMount’”

IT技术 reactjs webpack
2021-05-24 16:40:52

我用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"
  }
}
4个回答

此问题与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. 移除热重载器进行react(在你webpack.config移除'react-hot'加载器时)

  3. react-hot-loader更新到版本 3(这里是如何做到这一点:https : //github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915)。但请注意,这个包现在已经处于 alpha 阶段了一段时间......

  4. 将您的react版本回滚到包含ReactMount.js在 lib 文件夹中的版本(15.0.1 曾经让此文件不确定何时停止)。

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

以上解决方案都不适合我。剩下的一天都在 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.

您正在使用react-hot-loader使用内部 react api throught的过时react\lib\ReactMount现在react不允许这样做,因此问题。

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

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

感谢您的所有回答。我已经解决了我的问题。

“此问题与 react-hot-loader 包有关。您使用的旧版本依赖于 node_modules/react/lib 文件夹中存在的 ReactMount.js 文件。” 奶酪果蝇说。

所以这是我的解决方案:1)将 react-hot-loader 更新到最新版本

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

但这是另一个与 react-hot-loader 相关的问题 在此处输入图片说明

2) 所以我从“cfg/dev.js”中删除了 react-hot-loader 更改代码

loader: 'react-hot!babel-loader'

进入

loader: 'babel-loader'