更新后出错:无法解析模块' react / lib / ReactMount'

时间:2016-11-16 18:08:12

标签: reactjs heroku

所以当我开始收到ReactMount不在React / lib / ReactMount的错误时,我试图将我的react-webpack应用程序放在Heroku上。然后我尝试了很多不同的东西,最后尝试使用相同的react-webpack generater创建一个新项目。现在我甚至在运行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"

4 个答案:

答案 0 :(得分:17)

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

请参阅 - https://github.com/gaearon/react-hot-loader/issues/417

答案 1 :(得分:0)

对我来说有用的是从反应中简单地改变:^ 15.0.0到15.3.1。

答案 2 :(得分:0)

您需要更新react才能解决此问题。就我而言,我没有使用热装载机。响应升级解决了这个问题。目前位于15.4.0

答案 3 :(得分:-1)

转到node_modules / react-hot-loader / index.js并使用try catch而不是必需

替换此代码

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