Challenge Integrating Repack in React Native Mono Repo: App1 Loads Successfully, App2 Fails to Load from Server Bundles

[dhayaljaswantgit]

Ask your Question

Dear GitHub Community,

We are currently in the process of integrating repack into our React Native project to facilitate collaborative work across multiple teams. Prior to finalizing this integration, we are rigorously testing to ensure that it aligns with our expectations.

I have set up a mono repo containing three React Native projects: one serving as the host and the other two as mini apps. Locally, everything functions as expected - both on Android and iOS - with the successful loading of the two mini apps into the host app.

However, the challenge arises when attempting to download the bundles from the server. Here are the commands used to generate the iOS and Android bundles:

"bundle:ios": "react-native webpack-bundle --platform ios --entry-file index.js --bundle-output ./dist/index.bundle --dev=false",
"bundle:android": "react-native webpack-bundle --platform android --entry-file index.js --bundle-output ./dist/index.bundle --dev=false",

Despite uploading these bundles to Firebase Storage and attempting Firebase Hosting, both approaches have proven unsuccessful.

Below is the code snippet utilized for bundle download, with an emphasis on utilizing these server bundles exclusively in development mode:

const resolveURL = Federated.createURLResolver({
  containers: {
    app1: 'http://localhost:9000/[name][ext]',
    app2: 'https://firebasestorage.googleapis.com/v0/b/jaswant-dhayal.appspot.com/o/index-android.bundle?alt=media&token=0f5ab5ee-4b55-424a-8b6b-cd5f13ac119c',
  },
});

ScriptManager.shared.addResolver(async (scriptId, caller) => {
  let url;
  if (caller === 'main') {
    url = Script.getDevServerURL(scriptId);
  } else {
    url = await resolveURL(scriptId, caller);
  }

  if (!url) {
    return undefined;
  }
  return {
    url,
    cache: false, // For development
  };
});

const App1 = React.lazy(() => Federated.importModule('app1', './App'));
const App2 = React.lazy(() => Federated.importModule('app2', './App'));

function App(): React.JSX.Element {
  return (
    <SafeAreaView>
      <Text style={styles.sectionTitle}>This is Host app Jassu</Text>
      <React.Suspense fallback={<Text>Loading app1...</Text>}>
        <App1 />
      </React.Suspense>
      <React.Suspense fallback={<Text>Loading app2...</Text>}>
        <App2 />
      </React.Suspense>
    </SafeAreaView>
  );
}

Additionally, I am exploring the possibility of introducing versioning for these server bundles and investigating the compatibility of utilizing CodePush bundles in this context.

Note:
While app1 is loading fine, app2 never loads. Surprisingly, when attempting to load app2 using the local bundle URL (app2: 'http://localhost:9001/[name][ext]'), it loads perfectly fine.

Any assistance or guidance provided would be greatly appreciated.

Thank you.

[jbroma]

Hey @dhayaljaswantgit

for your first issue, please try changing the production path in the following manner:

from:

const resolveURL = Federated.createURLResolver({
  containers: {
    app1: 'http://localhost:9000/[name][ext]',
    app2: 'https://firebasestorage.googleapis.com/v0/b/jaswant-dhayal.appspot.com/o/index-android.bundle?alt=media&token=0f5ab5ee-4b55-424a-8b6b-cd5f13ac119c',
  },
});

to:

const resolveURL = Federated.createURLResolver({
  containers: {
    app1: 'http://localhost:9000/[name][ext]',
    app2: 'https://firebasestorage.googleapis.com/v0/b/jaswant-dhayal.appspot.com/o/[name][ext]',
  },
});

this is because there is more than one file to resolve using the resolver here. Typically you first download .container.bundle and then the app.chunk.bundle. Also please note that you don't need to include the index-android.bundle for the mini-apps as it's unused in MF setup.

when it comes to versioning, I can tell you from my experience that it's not a trivial problem to solve, you can look into this PR that introduced SDK to the super-app-showcase to help with having only 1 version to align to.

[github-actions]

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]

This issue has been automatically closed because it has been inactive for more than 14 days. Please reopen if you want to add more context.