升级React和react-hot-loader:react-hot-loader / index.js没有返回函数

时间:2019-08-08 14:02:58

标签: reactjs react-hot-loader

我正在尝试将React升级到最新版本。我目前正在使用v15.2.0。当我对〜15.4.0做出反应时,出现错误:

使用React 15.4.2和react-hot-loader 1.3.1

ModuleNotFoundError: Module not found: Error: Cannot resolve module 'react/lib/ReactMount' 

因此,在将react-hot-loader升级到4.12.10(最新)时,我会收到此错误

/node_modules/react-hot-loader/index.js didn't return a function

我该如何解决。

在升级react-hot-loader时,react-hot-lodaer / index.js从此更改

1.3.1

   'use strict';

    var path = require('path'),
        SourceNode = require('source-map').SourceNode,
        SourceMapConsumer = require('source-map').SourceMapConsumer,
        makeIdentitySourceMap = require('./makeIdentitySourceMap');

    module.exports = function (source, map) {
      if (this.cacheable) {
        this.cacheable();
      }

      var resourcePath = this.resourcePath;
      if (/[\\/]webpack[\\/]buildin[\\/]module\.js|[\\/]react-hot-loader[\\/]|[\\/]react[\\/]lib[\\/]/.test(resourcePath)) {
        return this.callback(null, source, map);
      }

      var acceptUpdates = this.query !== '?manual',
          filename = path.basename(resourcePath),
          separator = '\n\n',
          prependText,
          appendText,
          node,
          result;

      var reactMountImport;
      try {
        require('react-dom/lib/ReactMount');
        reactMountImport = 'ReactMount = require("react-dom/lib/ReactMount"),';
    } catch(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(' ');

      appendText = [
          '/* REACT HOT LOADER */',
          '}).call(this);',
        '} finally {',
          'if (module.hot) {',
            '(function () {',
              'var foundReactClasses = module.hot.data && module.hot.data.foundReactClasses || false;',
              'if (module.exports && module.makeHot) {',
                'var makeExportsHot = require(' + JSON.stringify(require.resolve('./makeExportsHot')) + ');',
                'if (makeExportsHot(module, require("react"))) {',
                  'foundReactClasses = true;',
                '}',
                'var shouldAcceptModule = ' + JSON.stringify(acceptUpdates) + ' && foundReactClasses;',
                'if (shouldAcceptModule) {',
                  'module.hot.accept(function (err) {',
                    'if (err) {',
                      'console.error("Cannot apply hot update to " + ' + JSON.stringify(filename) + ' + ": " + err.message);',
                    '}',
                  '});',
                '}',
              '}',
              'module.hot.dispose(function (data) {',
                'data.makeHot = module.makeHot;',
                'data.foundReactClasses = foundReactClasses;',
              '});',
            '})();',
          '}',
        '}'
      ].join(' ');

      if (this.sourceMap === false) {
        return this.callback(null, [
          prependText,
          source,
          appendText
        ].join(separator));
      }

      if (!map) {
        map = makeIdentitySourceMap(source, this.resourcePath);
      }

      node = new SourceNode(null, null, null, [
        new SourceNode(null, null, this.resourcePath, prependText),
        SourceNode.fromStringWithSourceMap(source, new SourceMapConsumer(map)),
        new SourceNode(null, null, this.resourcePath, appendText)
      ]).join(separator);

      result = node.toStringWithSourceMap();

      this.callback(null, result.code, result.map.toString());
    };

对此( 4.12.10

'use strict';

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./dist/react-hot-loader.production.min.js');
} else if (process.env.NODE_ENV === 'test') {
  module.exports = require('./dist/react-hot-loader.production.min.js');
} else if (typeof window === 'undefined') {
  // this is just server environment
  module.exports = require('./dist/react-hot-loader.production.min.js');
} else if (!module.hot) {
  module.exports = require('./dist/react-hot-loader.production.min.js');
  module.exports.AppContainer.warnAboutHMRDisabled = true;
  module.exports.hot.shouldWrapWithAppContainer = true;
} else {
  var evalAllowed = false;
  try {
    eval('evalAllowed = true');
  } catch (e) {
    // eval not allowed due to CSP
  }

  // RHL needs setPrototypeOf to operate Component inheritance, and eval to patch methods
  var jsFeaturesPresent = !!Object.setPrototypeOf;

  if (!jsFeaturesPresent || !evalAllowed) {
    // we are not in prod mode, but RHL could not be activated
    console.warn('React-Hot-Loader is not supported in this environment.');
    module.exports = require('./dist/react-hot-loader.production.min.js');
  } else {
    module.exports = window.reactHotLoaderGlobal = require('./dist/react-hot-loader.development.js');
  }
}

除了解决这个问题外,我还想了解这里发生了什么以及为什么导致此错误。

谢谢。

0 个答案:

没有答案