react-nativewebpackwebpack-module-federationmodule-federation-enhanced

Reapck React Native Module federation v2 dynamic remote loading


I am trying to load the remote dynamically through api in new Repack.plugins.ModuleFederationPluginV2({}) as shown below.

      remotes: {
        App: `promise new Promise(resolve => {
          fetch('http://192.168.0.102:3000/config')
            .then(res => res.json())
            .then(data => {
              const { remoteName, url } = data;
              console.log(data);
        
              if (!remoteName || !url) {
                throw new Error('Invalid remote config');
              }
        
              fetch(url)
                .then(response => response.text())
                .then(code => {
                    const script = new Function(code); 
                    script();
                   resolve(globalThis[data.remoteName]);
                })
                .catch(error => console.error('Error loading remote:', error));
            })
            .catch(error => console.error('Error fetching config:', error));
        })`,
      },

Not able to load the the script in native app, am I missing anything?

my api response is

http://192.168.0.102:3000/config

{
    "config": {
        "name": "micro-version-url",
        "remoteName": "App1",
        "url": "http://192.168.0.102:9002/android/app1.container.js.bundle",
    }
}

Please help


Solution

  • you need using this, Module Federation 2 has another approach https://module-federation.io/guide/basic/runtime.html#registerremotes