How to properly implement dynamic URLs for remotes?

[raulsvilar]

Hi everyone!

I'm working on a React Native module federation setup using Re.Pack and I'm having trouble understanding the correct way to implement dynamic URLs for my remotes. Currently, I can only get it working with the force: true flag, but I suspect this isn't the recommended approach.

I made some tests in a App.tsx with this functions:

async function initApp() {
  registerRemotes([{
    name: 'module_demo',
    entry: 'http://localhost:9000/android/mf-manifest.json',
  }], { force: true }); // ⚠️ Only works with force flag
}
 
async function loadApp() {
  try {
    await initApp();
    await loadRemote('module_demo/Main');
    return true;
  } catch (error) {
    console.error('Error loading remote module:', error);
    return false;
  }
}

My rspack.config.mjs configuration:

remotes: {
  'module-demo': `module_demo@$dynamic`,
},

Is there a better way to handle dynamic remote URLs? I need to be able to change the remote URLs at runtime?

Environment:

Re.Pack: 5.1.3
@rspack/core: 1.3.4
React Native: 0.80.2
Thanks in advance for any help!

[ElielC]

Hello.

We utilize the same approach after following the related documentation on repack and module-federation .

Force should probably be set as true to override the remote config in the rspack.config. There is a warning but for us it doesn`t seem to be a problem.