Loading remoteEntry dynamically from a server for different versions

See original GitHub issue

Hey everyone, First of all, thank you for the amazing work you’ve done with the module federation feature. I have an issue I can’t understand its origin, I have a remote widget that is being consumed in a host, it has multiple versions. For example 0.0.1 and 0.0.2 I load the remoteEntry as follows: http://localhost:8888/api/components/modules/widget-name/0.0.1/remote-entry.js for 0.0.1 and http://localhost:8888/api/components/modules/widget-name/0.0.2/remote-entry.js for version 0.0.2 I’m using the following example: https://github.com/module-federation/module-federation-examples/tree/master/advanced-api/dynamic-remotes when version 0.0.1 initially loads and then I switch to 0.0.2 - the widget that is being loaded is still 0.0.1, if I reload the page then I get version 0.0.2 and vice-versa.

widget federation config: new ModuleFederationPlugin({ name, filename: 'remote-entry.js', exposes :{ './App': './src/App.tsx' }, shared: { ...deps, react: { singleton: true, requiredVersion: deps.react, }, 'react-dom': { singleton: true, requiredVersion: deps['react-dom'], }, }, })

While debugging the following code: function loadComponent(scope, module) { return async () => { // Initializes the shared scope. Fills it with known provided modules from this build and all remotes await __webpack_init_sharing__('default'); const container = window[scope]; // or get the container somewhere else // Initialize the container, it may provide shared modules await container.init(__webpack_share_scopes__.default); const factory = await window[scope].get(module); const Module = factory(); return Module; }; }

I’ve noticed that when trying to load version 0.0.2 (after loading 0.0.1) Module is actually from version 0.0.1.

Update: Just wanted to add that I use react-router for navigation. Another thing I’ve noticed in the Network tab is that for the initial load I can see remote-entry.js file and some more chunks load as well, where when I navigate to the page of version 0.0.2 only the remote-entry.js file is being loaded without the chunks

Can anyone help me understand what is wrong, please?

Thank you very much in advance

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
ScriptedAlchemycommented, Aug 31, 2021

Shouldn’t need to hash module ids. But hashing chunks is a good idea

0reactions
DmitryMorlendercommented, Aug 30, 2021

I’ve already tried it without @remoteurl because I want to be flexible with the remote url. The scenario was as follows:

  1. Load version 0.0.1 and show it - worked.
  2. Load version 0.0.2 and show it - worked. BUT
  3. return to version 0.0.1 - loads 0.0.2

I found that making versioned hash moduleIds and chunkIds solves my issue, not sure this is the best way to achieve it though.

Read more comments on GitHub >

github_iconTop Results From Across the Web

4 Ways to Use Dynamic Remotes in Module Federation
For our enterprise use cases and multiple deployment models, ... Module Federation allows us to load remote containers dynamically.
Read more >
Webpack module federation lazy loading remoteEntry.js
When I enter page there are many requests for remoteEntry.js files for each app I have. I do not want to fetch it...
Read more >
Tutorial - A Guide to Module Federation for Enterprise
Module Federation allows a JavaScript application to dynamically load code from another application and in the process, share dependencies.
Read more >
Module Federation - webpack
This way you could dynamically load an A/B test which provides a different version of a shared module. tip. Ensure you have loaded...
Read more >
Micro-frontends: Module Federation with WebPack 5
It allows a JavaScript application to dynamically load code from another application (a different Webpack build).
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found