Is it possible to use known remotes?

[tom-sherman]

If I try to use remotes and import() to reference federated modules I receive the following error:

Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react?6273

Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react?6273
    at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=Ovo.uat:20991:63)
    at call (native)
    at __webpack_require__ (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=Ovo.uat:20607:46)
    at ./node_modules/react-native/Libraries/LogBox/Data/LogBoxData.js (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=Ovo.uat:8215:1937)
    at call (native)
    at __webpack_require__ (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=Ovo.uat:20607:46)
    at reportException (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=Ovo.uat:7211:4174)
    at reactConsoleErrorHandler (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=Ovo.uat:7211:5925)
    at checkVersions (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=Ovo.uat:7262:699)
    at ./node_modules/react-native/Libraries/Core/checkNativeVersion.js (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=Ovo.uat:7303:192)
    at call (native)
    at __webpack_require__ (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=Ovo.uat:20607:46)
    at ./node_modules/react-native/Libraries/Core/InitializeCore.js (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=Ovo.uat:7222:1364)
    at call (native)
    at __webpack_require__ (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=Ovo.uat:20607:46)
    at anonymous (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=Ovo.uat:21125:30)
    at global (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=Ovo.uat:21131:12)

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim
0x0

Repro here: https://github.com/tom-sherman/module-federation-repack/commit/b8e6e5c7ae09377209b2096e44c5e05ecb9c73a4

Is it possible to make this work?

My use case is that I want to use regular import()s for the benefit you get with TypeScript module declarations, this is not something that's easily achievable with loadComponent even though they do similar things at runtime.

[zamotany]

I think the only viable route for investigation is to use https://webpack.js.org/concepts/module-federation/#promise-based-dynamic-remotes and using Re.Pack's ChunkManager.loadChunk API inside.

[tom-sherman]

@zamotany I've tried this but I can't even get the code inside the remote string to execute, just get the same error about react-native not being available for eager consumption.

Repro: https://github.com/tom-sherman/module-federation-repack/commit/e994974a5f3fc66405f5c3e837b430dbca8d6875

Any pointers?

[zamotany]

I'm wondering if this const { ChunkManager } = import('@callstack/repack/client'); will work at all. Have you tried regular import import { ChunkManager } from '@callstack/repack/client'?

[tom-sherman]

@zamotany I just tried that and got a import declaration must be at top level of module error message, hermes cannot parse the JS with the import there and I guess this JS string isn't run through webpack loaders just injected straight into the bundle.

I've also tried require('@callstack/repack/client') and get the same earger consumption error from before.

At least I know the code is being injected into the bundle, it's just not being executed and I'm getting the eager consumption error instead. I know this because I've placed a console.log before the import('@callstack/repack/client') call and nothing is logged.

[zamotany]

Ok, how about assigning ChunkManager to global in your entry file before the app runs, and then using global.Chunkmanager in remotes?

[tom-sherman]

@zamotany Same error. The code string in remotes isn't being evaluated at all.

[tom-sherman]

We accomplished something similar in the end using external and setting ChunkManager to the __repack__ global. Also needed if(!__webpack_share_scopes__.default) __webpack_init_sharing__('default'); at the top of index.js.

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

This also unlocked synchronous imports (#7).

Ideally repack should do this work for me wen I supply a URL and/or use the @ syntax.