我正在尝试将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');
}
}
除了解决这个问题外,我还想了解这里发生了什么以及为什么导致此错误。
谢谢。