我正在使用react应用程序重新布线来配置ModuleFederation，使我的CRA应用程序Microfrontend兼容。我使用的是react脚本5，我的webpack配置看起来像这个
const { ModuleFederationPlugin } = require('webpack').container;
const ExternalTemplateRemotesPlugin = require('external-remotes-plugin');
const deps = require('./package.json').dependencies;
module.exports = {
webpack(config, env) {
config.output.publicPath = 'auto';
config.resolve.fallback = {
net: false,
};
config.resolve.alias = {
'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
'react/jsx-runtime': 'react/jsx-runtime.js',
};
config.plugins.push(
new NodePolyfillPlugin({
excludeAliases: ['console'],
})
);
config.plugins.push(
new ModuleFederationPlugin({
name: 'MyApp',
filename: 'remoteEntry.js',
remotes: {},
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
},
'react-dom': {
singleton: true,
requiredVersion: deps['react-dom'],
},
},
}),
new ExternalTemplateRemotesPlugin()
);
return config;
},
};
package.json脚本如下
"start": "node --max-http-header-size=16384 index",
"start:dev:react": "react-app-rewired --max_old_space_size=4096 start",
"start:dev": "concurrently -k "npm run start" "npm run start:dev:react"",
"build": "react-app-rewired --max_old_space_size=4096 build",
"coverage": "CI=true react-app-rewired test --ci --coverage",
"test": "npm run coverage",
"eject": "react-app-rewired eject",
当创建生产构建时(即在npm运行构建之后(，应用程序运行良好。但无法在本地工作，并失败，出现以下错误
TypeError: Cannot read properties of undefined (reading 'setExtraStackFrame')
at setCurrentlyValidatingElement$1 (react-jsx-dev-runtime.development.js:872:1)
at validateExplicitKey (react-jsx-dev-runtime.development.js:984:1)
at validateChildKeys (react-jsx-dev-runtime.development.js:1013:1)
at jsxWithValidation (react-jsx-dev-runtime.development.js:1184:1)
at MyComponent (MyComponent.js:99:1)
at oo (react-dom.production.min.js:157:137)
at Ku (react-dom.production.min.js:267:460)
at zi (react-dom.production.min.js:250:347)
at Ni (react-dom.production.min.js:250:278)
at Pi (react-dom.production.min.js:250:138)
at bi (react-dom.production.min.js:243:163)
at react-dom.production.min.js:123:115
at n.unstable_runWithPriority (scheduler.production.min.js:18:343)
at $l (react-dom.production.min.js:122:325)
at Yl (react-dom.production.min.js:123:61)
at Kl (react-dom.production.min.js:122:428)
互联网上的所有其他链接都让我想到了这一点https://github.com/facebook/react/issues/20359但我真的无法找到解决这个问题的办法。
编辑：当我从localhost/remoteEntry.js加载远程模块时，应用程序运行时不会出错。当我从生产应用程序加载remoteEntry时，它会失败。
我遵循了以下说明：https://github.com/facebook/react/issues/20359#issuecomment-1177480160
添加key属性，这已经解决了我的问题！