Общий модуль недоступен для нетерпеливого потребления: WebPack/Sharing/Usume/Default/React/React ⇐ Javascript

[Anonymous]

Я пытаюсь запустить приложение MicroFrontend React с использованием федерации модулей WebPack. Приложение Container (Container-App) загружает удаленные приложения (MFE-Dashboard, MFE-Portfolio) Динамически, используя обещание новое обещание (...).
Но я получаю ошибку в Crome Console как < /p>

Код: Выделить всё

main.js:995 Uncaught Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react
at __webpack_require__.m. (main.js:995:54)
at __webpack_require__ (main.js:228:32)
at fn (main.js:508:21)
at eval (index.js:2:63)
at ./src/index.js (main.js:201:1)
at __webpack_require__ (main.js:228:32)
at main.js:1623:37
at main.js:1625:12
< /code>
Я поделился своим кодом, как показано ниже.  Может ли кто-нибудь, пожалуйста, предложить какое-то решение.const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container;
const path = require("path");

module.exports = {
entry: "./src/index.js",
mode: "development",
devServer: {
port: 3000,
historyApiFallback: true,
},
output: {
publicPath: "auto",
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},
],
},
plugins: [
new ModuleFederationPlugin({
name: "container",
remotes: {
portfolio: "portfolio@promise new Promise(resolve => {\n    const script = document.createElement('script');\n    script.src = 'http://localhost:3001/remoteEntry.js';\n    script.onload = () => {\n      resolve(window.portfolio);\n    };\n    document.head.appendChild(script);\n  })",
dashboard: "dashboard@promise new Promise(resolve => {\n    const script = document.createElement('script');\n    script.src = 'http://localhost:3003/remoteEntry.js';\n    script.onload = () => {\n      resolve(window.dashboard);\n    };\n    document.head.appendChild(script);\n  })"
},
shared: {
react: { singleton: true, strictVersion: true, requiredVersion: "18.2.0" },
"react-dom": { singleton: true, strictVersion: true, requiredVersion: "18.2.0" },
},
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
],
resolve: {
extensions: [".js", ".jsx"],
},
};

mfe-dashboard/webpack.config.js

Код: Выделить всё

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
entry: './src/index.js',
mode: 'development',
devServer: {
port: 3003,
historyApiFallback: true
},
output: {
publicPath: 'auto'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
plugins: [
new ModuleFederationPlugin({
name: 'dashboard',
filename: 'remoteEntry.js',
exposes: {
'./Dashboard': './src/components/Dashboard'
},
shared: {
react: { singleton: true, strictVersion: true, requiredVersion: "18.2.0" },
"react-dom": { singleton: true, strictVersion: true, requiredVersion: "18.2.0" },
},
}),
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
};

mfe-portfolio/webpack.config.js

Код: Выделить всё

-------------------------------------
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require("webpack").container;
const path = require('path');

module.exports = {
entry: './src/index.js',
mode: 'development',
devServer: {
port: 3001
},
output: {
publicPath: 'auto'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
plugins: [
new ModuleFederationPlugin({
name: 'portfolio',
filename: 'remoteEntry.js',
exposes: {
'./Portfolio': './src/components/Portfolio'
},
shared: {
react: { singleton: true, strictVersion: true, requiredVersion: "18.2.0" },
"react-dom": { singleton: true, strictVersion: true, requiredVersion: "18.2.0" },
},
}),
new HtmlWebpackPlugin({
template: './public/index.html'
})
],
resolve: {
extensions: ['.js', '.jsx']
}
};

Подробнее здесь: https://stackoverflow.com/questions/797 ... consume-de