Module Federation host app not working [ScriptManager] failed to load script : [NetworkFailure]

[anuragarwalkar]

Environment

M1 Pro Xcode 15.4

"react-native": "0.74.1", "@callstack/repack": "4.0.0", "node: 20"

Issue

I am trying to run the module federation example from the Re.pack examples repository but encountering issues with the script manager failing to load. Despite creating new React Native apps and following all necessary configuration steps outlined on the Re.pack website, the module federation is not operational. Even after referring to the example apps, I am unable to get module federation up and running.

Reproducible Demo

https://github.com/anuragarwalkar/repack-module-federation

1. clone repack-module-federation
2. install all the dependencies
3. now run the app

host app error

[ScriptManager] Failed to load script: [NetworkFailure] {"cache": false, "caller": undefined, "locator": {"absolute": false, "body": undefined, "fetch": true, "headers": undefined, "method": "GET", "query": "platform=android", "timeout": 30000, "url": "http://localhost:9000/app1.container.bundle", "verifyScriptSignature": "off"}, "scriptId": "app1"} {"originalError": [Error: Failed to connect to localhost/127.0.0.1:9000]}

App1 devServer error

Additional Information

Re.pack Version: 3.3.0 (tried with 4.0) React Native Version: 0.68.2 Platform: ios/Android Node Version: 18.2 Operating System: MacOs Sonoma 14.5

[jbroma]

Hi @anuragarwalkar

first of all - the examples are a bit outdated and need refreshing, so sorry about that.

The network error you are getting is because you haven't run adb reverse tcp:9000 tcp:9000 - by default, adb reverse is only run on the host app port.

After fixing that one, we also need to fix the MF setup (see the diff below).

The trickiest part of this setup was to include NewAppScreen from react-native - it's a deep import and you should avoid those when using MF because you need to declare each one explicitly, and with an absolute path like above.

Here's the diff with the changes made to make the project work:

diff --git a/app1/webpack.config.mjs b/app1/webpack.config.mjs
index c906e02..4191e83 100644
--- a/app1/webpack.config.mjs
+++ b/app1/webpack.config.mjs
@@ -241,21 +241,14 @@ export default (env) => {
         shared: {
           react: {
             singleton: true,
-            eager: true,
-            // ...Repack.Federated.SHARED_REACT,
-            eager: STANDALONE, // to be figured out
-
+            eager: false,
           },
           'react-native': {
-            // ...Repack.Federated.SHARED_REACT_NATIVE,
             singleton: true,
-            eager: true,
-            requiredVersion: '0.74.1',
-            eager: STANDALONE, //
+            eager: false,
           },
         },
       }),
-      
     ],
   };
 };
diff --git a/host/App.tsx b/host/App.tsx
index eb0f947..a274fd3 100644
--- a/host/App.tsx
+++ b/host/App.tsx
@@ -1,9 +1,9 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import {Federated} from '@callstack/repack/client';
+import { Federated } from '@callstack/repack/client';
 import React from 'react';
 import { Text, SafeAreaView } from 'react-native';
 
-const App1 = React.lazy(() => Federated.importModule('app1', './app1'));
+const App1 = React.lazy(() => Federated.importModule('app1', './App'));
 
 export default function App() {
   return (
diff --git a/host/webpack.config.mjs b/host/webpack.config.mjs
index c9d5713..9551242 100644
--- a/host/webpack.config.mjs
+++ b/host/webpack.config.mjs
@@ -237,18 +237,24 @@ export default (env) => {
         name: 'host',
         shared: {
           react: {
-            ...Repack.Federated.SHARED_REACT,
-            requiredVersion: '18.2.0',
+            singleton: true,
+            eager: true,
           },
           'react-native': {
-            ...Repack.Federated.SHARED_REACT_NATIVE,
-            requiredVersion: '0.74.1',
+            singleton: true,
+            eager: true,
+          },
+          [resolve('react-native/Libraries/NewAppScreen')]: {
+            singleton: true,
+            eager: true,
+            shareKey: 'react-native/Libraries/NewAppScreen',
+            version: '0.74.1',
           },
         },
       }),
     ],
     stats: {
-      all: true,  // This enables verbose logging
+      all: true, // This enables verbose logging
     },
   };
 };

[github-actions[bot]]

This issue has been marked as stale because it has been inactive for 30 days. Please update this issue or it will be automatically closed in 14 days.

[github-actions[bot]]

This issue has been marked as stale because it has been inactive for 30 days. Please update this issue or it will be automatically closed in 14 days.

[jbroma]

Closing as the answer was provided

[ra1nj]

[resolve('react-native/Libraries/NewAppScreen')]: {
+            singleton: true,
+            eager: true,
+            shareKey: 'react-native/Libraries/NewAppScreen',
+            version: '0.74.1',
           },

Wow, about the deep import, didn't saw that on the documentation, no wonder my app keep freezing (CPU load keep growing) if the mini app has some deep import , there are also no error message printed out , take me ages to find this answer🤣
can we automatically detect it ? cause i am migrating a old project to Module federation, there are a lot of deep import , do i need to manually check those files one by one ?

[jbroma]

@ra1nj it's entirely possible to make and configure an eslint rule for that or a webpack plugin that displays warnings during build

I believe this rule will be especially useful for you: https://eslint.org/docs/latest/rules/no-restricted-imports