Issue with Stateful Module Sharing

[sudhakar-selva]

We are facing a peculiar issue with MFV1. Not sure if this will happen on MFV2. Basically, we have a global module (refer to the code snippet below) which is exposed and consumed by remotes through MF. However, the module referenced in the remote and host seems to be pointing to different object references, leading to regressions.

globals.ts(Host)

const config = {
   url: '',
   key:  '', // might get updated after app bootup
  // etc.
}

export default {
  get(key) {
     return config[key]
  },
  set(key, value) {
     config[key] = value 
  }
}

RemoteA

import global from 'host/globals'

console.log(global.get('url')); logs incorrect data

What is the recommended approach to solve such issues and how to prevent this from happening? Is it happening because of custom splitChunks logic or the name of the entry point and MF name being different, etc.? Please suggest a way forward on this.

[ScriptedAlchemy]

you need optimization.runtimeChunk.single.. look at module-federation-examples/runtime-plugins/single-runtime to see how to do it - the host loading its own remote or a remote loading hosts remote causes 2 runtime graphs to load on the page - to avoid that youd want to have a shared runtime for when hosts remote is loaded by someone.

[sudhakar-selva]

got it, I'll take a look at the example repo. As always, thanks for your help! 🖖

[ScriptedAlchemy]

Share it as singleton or use single runtime chunk. Check runtime plugins folder in examples repo. There's a single runtime sample

[sudhakar-selva]

sharing it as singleton wont work for exposed module CMIIW?

MFPlugin({exposes: { './global: './src/../globals.ts' }}, ...)

[ScriptedAlchemy]

It will. Call it something like "globals" then use import property in object to point it at the fiel and have everyone import it as globals or whatever you share it as instead of exposing it.

Otherwise, you need to use the single runtime solution i mentioned.

[sudhakar-selva]

It will. Call it something like "globals" then use import property in object to point it at the fiel and have everyone import it as globals or whatever you share it as instead of exposing it.

sorry, I didn't get this part. could you please provide some example?

[ScriptedAlchemy]

Look at single runtime folder in federation examples repo under runtime plugins. Or use shared not exposes and share it as singleton