webpack / webpack

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

Home Page:https://webpack.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Module Federation - Some chunks are not loaded when navigating from the Remote module to the Host module

andre-lima opened this issue · comments

Bug report

What is the current behavior?

In our application we use Module Federation to break the monolith. Currently, all modules' files (Host and Remote) live in the same repository, divided into different folders with their own dependencies.

Our current setup functions in a bi-directional mode, in which, the "true” host exposes contexts & common components, and the remotes expose their pages.

We’re facing an issue when running the application in production mode only. When we reload the browser while in a route managed by the Remote module then we leave to the Host application, some of the chunks necessary to run the Host are not loaded by the browser, breaking the application.

This does not occur in development mode.

This also does not occur if we manually add the missing functionality/components to the list of exposed components in the Host’s Module Federation configuration. The thing is, these components are not needed in the Remote module, so in our opinion, they shouldn’t need to be exposed in the first place.

If the current behavior is a bug, please provide the steps to reproduce.

  • Launch the application in production mode.
  • Load the Host application.
    • Verify in the inspector that all the chunks are loaded.
  • Navigate to a route of the Remote application.
  • Refresh the browser.
    • Verify that not all the chunks were loaded this time.
  • Navigate to the Host application.
  • If the page you navigated to uses a component/function that was contained in the missing chunk, it will throw an error.

What is the expected behavior?

When navigating to the Host module from the Remote one, all missing chunks should be loaded, and no errors are thrown.

Other relevant information:
webpack version: 5.90.3
Node.js version: 16.20.1
Operating System: MacOS Venture 13.5
Additional tools: Module Federation