How to access host app's variable/functions within a miniapp

[ra1nj]

Let's say i have a host app , a mini app , how can i access functions/variables inside host app from mini app , by adding exposes inside host's ModuleFederationPlugin , then call Federated.importModule('host', 'xxx') inside mini app ? i tried this but end up with : [ScriptManager] Failed while resolving script locator: {"caller": undefined, "scriptId": "FastInspection"} {"originalError": [TypeError: resolver is not a function (it is undefined)]}

Global variable can work but i don't want to put everything inside global variable

[ra1nj]

It's seems like if i shared through Host's ModuleFederationPlugin.exposes , it's actually a individual script context , the value i assigned in host becomes null in miniApp.
For example : i keep the NavigationContainer's ref in a variable called navigationRef, the value is assigned until NavigationContainer is rendered, so if shared through ModuleFederationPlugin.exposes, the navigationRef is just a null , because the imported module host from miniApp is a individual context(container).

So what's the right way to do this ? through global variable ?

[jbroma]

you can do this through:

1. global variable
2. using a react context
3. using a 3rd federated module that will be accessed in both host and mini app

I'm not sure there is a proper example for that, repack-examples repo needs an overhaul and is largely outdated. You can also check out https://github.com/callstack/super-app-showcase for some inspiration but I'm not sure there is a bidirectional flow that includes this case.

[ra1nj]

Yes, currently i didn't see any example includes a bidirectional flow. I was thinking that since a mimi app is loaded, the host app is also definitely loaded, is that possible we can import host app's module, functions, variable synchronously, maybe use require ?