更新后出错：无法解析模块“react/lib/ReactMount”

Posted 2023-03-13

【中文标题】更新后出错：无法解析模块“react/lib/ReactMount”

【英文标题】：Error after update: Cannot resolve module 'react/lib/ReactMount'

【发布时间】：2017-03-31 01:41:11

【问题描述】：

所以当我开始收到 ReactMount 不在 React/lib/ReactMount 的错误时，我试图将我的 react-webpack 应用程序放在 Heroku 上。然后我尝试了很多不同的东西，最终尝试使用相同的 react-webpack 生成器创建一个新项目。现在，即使在 localhost 上运行，我也会遇到同样的错误，这意味着它一定是由于某处的更新，对吧？

有人知道吗？

我有以下依赖项：

 "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",
"firebase": "^3.5.2",
"input-moment": "^0.3.0",
"moment": "^2.15.2",
"normalize.css": "^4.0.0",
"react": "^15.0.0",
"react-bootstrap-datetimepicker": "0.0.22",
"react-datetimepicker-bootstrap": "^1.1.2",
"react-dom": "^15.0.0",
"webpack": "^1.13.3"

【问题讨论】：

你使用的是什么版本的 React？他们今天发布了一个新版本，它改变了内部 API。 React/lib 里面的东西被移动了；它不是公共 API 的一部分，不应直接引用。如果你升级到 React 15.4，那可能就是问题所在。如果你没有明确引用内部的东西，你正在使用的另一个包可能是。

我确实遇到了同样的错误，使用 React 15.3.1

我正在使用 react 15.0.0，如依赖项中所示。很抱歉，我对所有这些工作都不是很有信心，但更新不应该以我现在拥有依赖项的方式影响项目，对吧？

npm 会将 ^15.0.0 解析为最新的包，直到版本 16.0.0 之前

你的依赖是至少 React 15.0.0;如果您进行更新，它将获得最新的。执行npm list 以查看实际安装的版本。是的，如果 React 更新和你正在使用的其他模块没有改变以支持新的 React 版本，它会非常影响事情。你可以为你的 React 版本尝试=15.3.2，看看是否有帮助。

【参考方案1】：

转到 node_modules/react-hot-loader/index.js 并使用 try catch 代替 required

替换此代码

prependText = [
'/* REACT HOT LOADER */',
'if (module.hot) ',
  '(function () ',
    'var ReactHotAPI = require(' + JSON.stringify(require.resolve('react-hot-api')) + '),',
        'RootInstanceProvider = require(' + JSON.stringify(require.resolve('./RootInstanceProvider')) + '),',
        'ReactMount = require("react/lib/ReactMount"),',
        'React = require("react");',

    'module.makeHot = module.hot.data ? module.hot.data.makeHot : ReactHotAPI(function () ',
      'return RootInstanceProvider.getRootInstances(ReactMount);',
    ', React);',
  ')();',
'',
'try ',
  '(function () ',
 ].join(' ');

使用 try 和 catch 处理错误的新代码

var reactMountImport;
   try 
 require('react-dom/lib/ReactMount');
     reactMountImport = 'ReactMount = require("react-dom/lib/ReactMount"),';
   catch(e) 
   console.log(e)
  reactMountImport = 'ReactMount = require("react/lib/ReactMount"),';
  

 prependText = [
'/* REACT HOT LOADER */',
'if (module.hot) ',
  '(function () ',
    'var ReactHotAPI = require(' + JSON.stringify(require.resolve('react-hot-api')) + '),',
        'RootInstanceProvider = require(' + JSON.stringify(require.resolve('./RootInstanceProvider')) + '),',
        reactMountImport,
        'React = require("react");',

    'module.makeHot = module.hot.data ? module.hot.data.makeHot : ReactHotAPI(function () ',
      'return RootInstanceProvider.getRootInstances(ReactMount);',
    ', React);',
  ')();',
'',
'try ',
  '(function () ',
].join(' ');

您可以在此处查看更改 https://github.com/gaearon/react-hot-loader/pull/430/commits/4ff08252bd8bf90dbc89fc6d032f557825ec0300#diff-168726dbe96b3ce427e7fedce31bb0bc

【讨论】：

手动编辑 node_modules 是个坏主意，更新后它们会再次中断。

【参考方案2】：

您需要更新 react 才能解决此问题。就我而言，我没有使用热加载程序。升级反应解决了这个问题。目前在15.4.0

【参考方案3】：

对我有用的是从 react: ^15.0.0 到 15.3.1 的简​​单更改。

【参考方案4】：

看起来你和我在同一条船上。我们都在使用旧版本的 react-hot-loader 更新到版本 3.x 并再次进行 npm 安装。

见 - https://github.com/gaearon/react-hot-loader/issues/417