Javascript Webpack 5模块联合-远程模块中的挂钩-不工作

我试图在模块联合（Webpack5特性）的帮助下在运行时获得一个动态系统。一切都很好，但当我向“producer”模块（宿主应用程序从中动态导入组件的模块）添加钩子时，我会收到大量“无效钩子规则”错误

Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function. For more information, see [LINK RULES OF HOOKS]

我已经在html文件中使用了externals字段并添加了script标记，我使用了shared选项来添加singleton字段：true并指定react和react dom version 每次控制台都会抛出大量错误

这是我直接从文档中加载模块的方法

constloadcomponent=（作用域：string，模块：string）=>async（）：Promise=>{
//@ts忽略
等待网页包初始化共享（“默认”）；
//@ts忽略
const container=窗口[范围]；
//@ts忽略
wait container.init（_webpack_share_scopes__.default）；
//@ts忽略
const factory=wait window[scope].get（模块）；
返回工厂（）；
};

要加载remoteEntry.js文件，我使用makeAsyncScriptLoader HOC和react async脚本，如下所示：

constwithscript=（名称：string，url:string）=>{
常量加载元素=（）=>{
返回装载。。。；
};
return（）=>{
常量[scriptLoaded，setScriptLoaded]=useState（false）；
const AsyncScriptLoader=makeAsyncScriptLoader（url{
globalName:name，
})（加载元件）；
如果（脚本加载）{
返回；
}
返回(
{
setScriptLoaded（true）；
}}
/>
);
};
};

PluginHolder是一个简单的组件，它从加载的脚本中包装加载模块（加载实际上已经完成）

useffect（（）：void=>{
（异步（）=>{
const c=等待加载组件（名称'./插件'）（）；
setComponent（c.default）；
})();
}, []);
返回克隆元素（组件）；

最重要的是起动机：

const[plugins，setPlugins]=useState（[]）；
useffect（（）：void=>{
pluginNames.forEach（desc=>{
const loaded=with脚本（desc.name，desc.url）；
setPlugins（[…plugins，loaded]）；
});
}, []);

我不使用React.Lazy，因为我不能使用import（）。此外，在宿主应用程序中，我在react和react dom中设置了字段eager:true

我的webpack.config.js（主机）如下：

require（'tslib'）；
const path=require（'path'）；
const HtmlWebpackPlugin=require（'html-webpack-plugin'）；
const{DefinePlugin}=require（'webpack'）；
const{ModuleFederationPlugin}=require（'webpack'）。容器；
//@ts忽略
const AutomaticVendorFederation=require（“@module federation/automatic vendor federation”）；
const packageJson=require（'./package.json'）；
const exclude=['babel'，'plugin'，'preset'，'webpack'，'loader'，'service']；
const ignoreVersion=['react'，'react dom']；
const automaticVendorFederation=automaticVendorFederation({
排除
无知的，
packageJson，
shareFrom:['dependencies'，'peerDependencies']，
忽略版本：false，
});
module.exports={
模式：“无”，
条目：{
app:path.join（uu dirname，'src'，'index.tsx'），
},
目标：“网络”，
决心：{
扩展名：['.ts'，'.tsx'，'.js']，
},
模块：{
规则：[
{
测试：/\.tsx？$/,，
排除：“/node_modules/”，
使用“ts加载器”，
},
{
测试：/\（s[ac]| c）ss$/i，
排除：“/node_modules/”，
使用：[
“样式加载器”，
“css加载程序”，
“sass loader”，
],
},
],
},
插件：[
新HtmlWebpackPlugin({
模板：path.join（uuu dirname，'public'，'index.html'），
favicon:path.join（u dirname，'public'，'favicon.ico'），
}),
新定义插件({
'process.env.NODE_env'：JSON.stringify（'development'），
}),
新ModuleFederationPlugin({
名称：'主机'，
遥控器：{}，
曝光：{}，
共享：{
…自动建立联邦，
反应：{
是的，
辛格尔顿：没错，
requiredVersion:packageJson.dependencies.react，
},
“反应dom”：{
是的，
辛格尔顿：没错，
requiredVersion:packageJson.dependencies['react-dom']，
},
},
}),
],
输出：{
文件名：'[name].js'，
path:path.resolve（uu dirname，'dist'），
公共路径：'http://localhost:3001/',
},
开发服务器：{
contentBase:path.join（uu dirname，'dist'），
港口：3001，
},
};

还有第二个模块中的webpack.config.js：

require（'tslib'）；
const path=require（'path'）；
const HtmlWebpackPlugin=require（'html-webpack-plugin'）；
const{DefinePlugin}=require（'webpack'）；
const{ModuleFederationPlugin}=require（'webpack'）。容器；
//@ts忽略
const AutomaticVendorFederation=require（“@module federation/automatic vendor federation”）；
const packageJson=require（'./package.json'）；
const exclude=['babel'，'plugin'，'preset'，'webpack'，'loader'，'service']；
const ignoreVersion=['react'，'react dom']；
const automaticVendorFederation=automaticVendorFederation({
排除
无知的，
packageJson，
shareFrom:['dependencies'，'peerDependencies']，
忽略版本：false，
});
module.exports=（环境，argv）=>{
常数{mode}=argv；
const isDev=模式！=“生产”；
返回{
模式
条目：{
插件：path.join（uu dirname，'src'，'index.tsx'），
},
目标：“网络”，
Warning: React has detected a change in the order of Hooks called by PluginHolder. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: [LINK RULES OF HOOKS]

  plugins: [
    new ModuleFederationPlugin(
      {
        name: 'MFE1',
        filename:
          'remoteEntry.js',

        exposes: {
          './Button':'./src/Button',
        },
        shared: { react: { singleton: true }, "react-dom": { singleton: true } },
      }
    ),
    new HtmlWebpackPlugin({
      template:
        './public/index.html',
    }),
  ],
};