“找不到模块：错误：无法解析模块'react/lib/ReactMount'”答案

【问题标题】："module not found : Error: Cannot resolve module 'react/lib/ReactMount' "“找不到模块：错误：无法解析模块'react/lib/ReactMount'”
【发布时间】：2017-03-31 20:14:36
【问题描述】：

我用Reactjs和webpack启动一个项目，在命令提示符下运行“节点服务器”，出现如下错误：

而且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"
  }
}

【问题讨论】：

不用说，你确定G:\toolsForFE\gallery\node_modules\react\lib\ReactMount存在吗？
react\lib 中没有 ReactMout，但我不知道如何获取 ReactMout。我尝试运行命令“npm install ReactMount”，但失败了。顺便说一句，我只是运行命令“npm install generator-react-webpack”和“yo react-webpack gallery”，之后我运行“节点服务器”打开服务器，然后这里出了点问题但我没有修改任何东西。
你使用的是哪个版本的 React？从未支持从 react/lib/ 导入，并且 React 15.4（昨天发布）有一个重构可以移动该目录中的内容。

标签： reactjs webpack

【解决方案1】：

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

没有一种简单的方法可以解决这个问题，但您有以下几种选择：

尝试按照此处的说明进行操作：https://github.com/gaearon/react-hot-loader/blob/v3.0.0-beta.6/docs/README.md#usage-with-external-react（但到目前为止我运气不佳）
移除热加载器以进行反应（在你的 webpack.config 中移除 'react-hot' 加载器）
将 react-hot-loader 包更新到版本 3（操作方法如下：https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915）。但请注意，这个包已经处于 alpha 状态有一段时间了......
将您的 react 版本回滚到 lib 文件夹中包含 ReactMount.js 的版本（15.0.1 曾经让此文件不确定何时停止）。

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

【讨论】：

【解决方案2】：

以上解决方案都不适合我。余下的时间都在 github 问题/cmets 的兔子洞中度过，权衡各种 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.js react-redux 生成器生成的，并且具有相同的 package.json。

【讨论】：

感谢您为我节省了几个小时。我遇到了完全相同的问题，这个临时修复对我有用。
只是不要忘记“临时”部分！ :)
部署一个，没关系对吗？我不明白你为什么一直说这是一个“临时”修复......没有其他事情要做。

【解决方案3】：

您正在使用一个过时的 react-hot-loader 包，该包通过react\lib\ReactMount 使用内部反应 API。现在 react 不允许这样做，因此出现了问题。

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

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

【讨论】：

现在我的错误是缺少另一个文件：./node_modules/react-dom/lib/ReactNodeTypes.js
哈哈！使用 'sudo npm remove --save webpack' 和 'sudo npm install webpack@3.11.0 --save' 修复，谢谢！
做到了。没啥事儿。同样的问题。难以置信

【解决方案4】：

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

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

所以这是我的解决方案： 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'

【讨论】：

【解决方案5】：

非常感谢 cheesemacfly，我能够通过您从加载程序中删除“react-hot”的建议解决了同样的问题。

{
    test: /\.(js|jsx)$/,
    loaders: ['react-hot', 'babel'],
    exclude: /(node_modules|lib\/ckeditor)/
}

我改成：

{
    test: /\.(js|jsx)$/,
    loader: 'babel',
    exclude: /(node_modules|lib\/ckeditor)/
}

请记住将单词“loaders”更改为“loader”，因为您不再引用列表。

【讨论】：

【解决方案6】：

这可能只是一个依赖问题。要么没有得到正确版本的 react 要么没有正确安装。

# 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

然后尝试生成您的应用。

【讨论】：

我已经更新了 npm，并按照你的建议重新安装了 generator-react-webpack。问题仍然存在。
你能发布你的package.json文件是什么样子的吗？

【解决方案7】：

我遇到了同样的问题，但没有一个解决方案奏效。然后我想到似乎缺少反应。我在安装和卸载 postgreSQL 的包后遇到了问题。

所以我添加了它。 PS，我用的是yarn

yarn add react

【讨论】：

【解决方案8】：

更新react-hot-loader 对我不起作用，但从加载器列表中删除react-hot，只需对其进行评论即可解决问题：

{
    test: /\.js$/,
    exclude: /node_modules/,
    loaders: [
        // 'react-hot',
       'babel'
    ]
}

【讨论】：

【解决方案9】：

有两个问题在起作用：

正确升级所有依赖项，并且，
使用webpack v. 3.11.0，不要升级到webpack v. 4.00，
将 ReactJS 降级为 React v. 15.6.2。

打开package.json，其中会列出...

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

然后在你的包基础目录中运行这样的命令，它具有与上面列出的相同的依赖项......

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 答案： ^^^ 这是您实际需要运行的一个命令。

注意 webpack 特定的版本。

在这之后，一切都为我工作了！我检查了 ReactJS 版本，使用这个答案，https://stackoverflow.com/a/36994601/2430549，我的 package.json 现在看起来像......

"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",

来源：JanTheHun 的回答，https://github.com/angular/angular-cli/issues/9793

【讨论】：

【解决方案10】：

对我来说，这是一个旧版本的 react-dom。

我将 react 和 react-dom 的版本更改为 16.X（准确地说：“react”：“16.13.1”，“react-dom” : "16.13.1",)，然后这个问题就解决了。

【讨论】：