Я создаю проект с федерацией модулей webpack со следующей настройкой:
localhost:3000
)localhost:4201
)localhost:4202
)Цель состоит в том, чтобы оба пульта работали. Если я запускаю только один из них и удаляю другой, он работает отлично.
Проблема, с которой я сталкиваюсь, заключается в том, что при загрузке пультов __webpack_require__.p
устанавливается одним из сценариев пультов, и поэтому фрагмент другого пульта загружается с неправильного URL-адреса.
Вот ошибка, которую я получаю:
Моя конфигурация федерации модулей выглядит следующим образом:
.
.
.
new ModuleFederationPlugin({
name: "react_host",
filename: "remoteEntry.js",
remotes: {
angular_remote_1: "angular_remote_1@http://localhost:4201/angular_remote_1.js",
angular_remote_2: "angular_remote_2@http://localhost:4202/angular_remote_2.js"
},
exposes: {},
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
},
"react-dom": {
singleton: true,
requiredVersion: deps["react-dom"],
},
},
}),
.
.
.
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "auto",
uniqueName: "angular_remote_1",
scriptType: "text/javascript"
},
optimization: {
runtimeChunk: false
},
experiments: {
outputModule: true
},
plugins: [
new ModuleFederationPlugin({
name: "angular_remote_1",
library: { type: "var", name: "angular_remote_1" },
filename: "angular_remote_1.js",
exposes: {
'./angularRemote1': './src/loadAngularRemote1.ts',
},
shared: ["@angular/core", "@angular/common", "@angular/router"]
})
],
};
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "auto",
uniqueName: "angular_remote_2",
scriptType: "text/javascript"
},
optimization: {
runtimeChunk: false
},
experiments: {
outputModule: true,
},
plugins: [
new ModuleFederationPlugin({
name: "angular_remote_2",
library: { type: "var", name: "angular_remote_2" },
filename: "angular_remote_2.js",
exposes: {
'./angularRemote2': './src/loadAngularRemote2.ts',
},
shared: ["@angular/core", "@angular/common", "@angular/router"]
})
],
};
Тонки, которые я пробовал до сих пор:
auto
и жестко заданным)chunkLoadingGlobal
для обоих пультов (не хоста)Точное воспроизведение этой проблемы можно найти здесь: https://github.com/BarniPro/react-host-angular-remotes-microfrontend
Любая помощь приветствуется.
Проблему можно решить, установив для topLevelAwait
эксперимента значение true в пультах webpack.config.js
:
experiments: {
topLevelAwait: true,
},
Это приводит к тому, что два пульта загружаются синхронно, что предотвращает переопределение путей друг друга.
Еще одно обновление, которое мне пришлось сделать, это отключить опцию splitChunks
в настройках оптимизации пультов (см. SplitChunksPlugin):
optimization: {
runtimeChunk: false, // This is also needed, but was added in the original question as well
splitChunks: false,
}
Репозиторий Github обновлен рабочим решением.