Syncronous imports of federated modules

[tom-sherman]

Is this possible? When I try I cannot get past the error:

Shared module is not available for eager consumption: webpack/sharing/consume.default/react-native/react-native

[zamotany]

Synchronous imports right now are not possible, maybe in the future with TurboModules/JSI it might be doable. How are you exactly trying it?

[tom-sherman]

I have attempted a few things, setting eager: true and also attempting to defer registration of the root component using registerRunnable and runApplication. Neither seem to work.

[zamotany]

eager: true should be set for at least react and react-native. For which dependency in which container's config are you setting the eager: true?

[tom-sherman]

I'll try and spin up a repro 👍

[tom-sherman]

Actually @zamotany if you're saying this is impossible right now I suppose it's not worth me spinning up a reproduction?

Can you explain what makes this not possible? I assume the constraint is on the repack side?

[zamotany]

The constraint is on the React Native side. There's no API to download and evaluate JavaScript especially asynchronously. There's no importScripts for example. So to even support MF Re.Pack provides API to download and evaluate JS on the native side as a Native Module. Before Turbo modules, the communication with native modules was asynchronous and so few dependencies like react and react-native had to be evaluated synchronously as eager modules, otherwise the BatchedBrige wouldn't be usable to communicate with native modules.

[tom-sherman]

@zamotany FYI I spoke to @ScriptedAlchemy about this one and we came to the conclusion that this should be possible.

To clarify above, I wasn't referring to federating react or react-native - I understand that these have to be shared singletons due to limitations in React Native. I was talking about syncronously importing userland federated modules.

Zack mentioned this should be possible as long as you have an async boundary like the one between Root and app1/App.js, it should then be possible to sync import federated modules from app1.

[ScriptedAlchemy]

Correct

[zamotany]

@tom-sherman Could you explain what you mean by sync import federated modules? I want to make sure when we talk about syncronously importing code, we're talking about the same thing.

[tom-sherman]

Yup sure, I mean being about to do import something from "federated-module" where "federated-module" is some federated remote module. Instead of doing import("federated-module")

[tom-sherman]

Zack and I had a workshop yesterday and we managed to get sync imports working.

See https://github.com/zamotany/module-federation-repack/compare/main...tom-sherman:module-federation-repack:c273eaa94c55bbdf761f313c2ce8c86349b47ac3

Later I'll expand on what I think needs to change in repack to make this easier but thought I'd share to get your thoughts first 👍

[ScriptedAlchemy]

Yeah we nearly there. Some help from a repack maintainer would help us land the last parts nicely

[tom-sherman]

I think the main thing that got this working was initialising the default shared scope manually: https://github.com/tom-sherman/module-federation-repack/blob/466d5fddcb22391c380ebbe5b4583415c311721d/host/index.js#L6-L8

[zamotany]

I have doubts that's the case. I'm working on a next major version of Re.Pack with better MF support and I got synchronous imports for remotes working without manually initialising shared scope.

[tom-sherman]

@zamotany Is this work being done in the open? I'd love to take a look!

Edit: Ah saw your other comment https://github.com/callstack/repack/projects/4

[zamotany]

Yup, there's a v3 branch and some other branches based on v3, you can track progress here: https://github.com/callstack/repack/projects/4