Федерация модулей Webpack загружает фрагменты с неправильного URL-адреса

Я создаю проект с федерацией модулей webpack со следующей настройкой:

  • Хост React (работает на localhost:3000)
  • Angular Remote 1 (работает на localhost:4201)
  • Angular Remote 2 (работает на 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"],
        },
      },
    }),
.
.
.
  • Угловой пульт 1
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"]
        })
    ],
};
  • Угловой пульт 2
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

Любая помощь приветствуется.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
358
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблему можно решить, установив для 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 обновлен рабочим решением.

Другие вопросы по теме