module-federation runtime loadRemote with ScriptManager.shared.addResolver

[mlakmal]

we are using "loadRemote" from @module-federation/enhanced/runtime to load micro frontends at runtime.

import { loadRemote } from '@module-federation/enhanced/runtime';
import React from 'react';

type LoadRmoteComponent = (
  remoteName: string
) => React.LazyExoticComponent<React.ComponentType<any>>;


const loadRemoteComponent: LoadRmoteComponent = (remoteName) => {
  return React.lazy(async () => {
    const remoteModule = await loadRemote<{ default: React.ComponentType<any> }>(
      remoteName
    );

    if (!remoteModule) {
      throw new Error(`Failed to load ${remoteName}`);
    }

    return remoteModule;
  });
};

export default loadRemoteComponent;

we also have lazy loaded scripts using dynamic/runtime import.

const envConfig = await import(`./config.${environment}`);

with above usage, re.pack is complaining about missing resolver to handle the runtime dynamic imports. do we have an example supporting both module-federation runtime loadRemote and dynamic import via ScriptManager resolvers?

when i tried to add ScriptManager resolver, it is intercepting module-federation loadRemote calls, but does not use proper mf-manifest.json definitions to generate the url...

@jbroma ^^

[jbroma]

have you tried using loadRemote from @module-federation/runtime ?

[prosandmusic]

``import` { init, loadRemote } from '@module-federation/enhanced/runtime';
import { RetryPlugin } from '@module-federation/retry-plugin';

init({
  name: 'host-app',
  remotes: [
    {
      name: '@remote/app1',
      alias: 'app1',
      entry: 'http://localhost:3005/mf-manifest.json',
    },
  ],
  plugins: [
    RetryPlugin({
      fetch: { retries: 3, delay: 1000 },
      script: { retries: 3, delay: 1000 },
    }),
  ],
`});``

You did not have the init from @module-federation/enhanced-runtime``

[mlakmal]

@jbroma using 5.1.0-rc.0 with runtime MF fixed the caching. we only had to do below change in resolver (add if condition).

ScriptManager.shared.addResolver(
  async (scriptId, caller) => {
    if (scriptId === 'remote' || caller === 'remote') {
      // avoid handling microapps as these are handled by module-federation runtime
      return undefined;
    }

    // In dev mode, resolve script location to dev server.
    if (__DEV__) {
      const result: ScriptLocator = {
        url: Script.getDevServerURL(scriptId),
        cache: false,
      };

      return result;
    }

    return {
      url: Script.getFileSystemURL(scriptId),
    };
  },
  {
    key: 'config',
  }
);

we needed the resolver bcos we have non MF lazy imports like below (those imports were failing without resolver).

const envConfig = await import(/* webpackChunkName: "[request]" */ `./config.${environment}`);

while above works fine, i noticed that invalidating the scripts using ScriptManager.shared.invalidateScripts() does not clear from cache. even after invalidating, scripts are still pulled from cache. (we used a proxy and validating outgoing script calls to check if scripts are used via cache or reloaded).

[jbroma]

try invalidateScripts() without any args - this should clean the whole cache

[mlakmal]

yes, we are doing same. but its not clearing. it still pulls from cache. i tried commenting out ScriptManager.shared.setStorage, even with that disabled still seeing cache used.

[jbroma]

I'm not sure what might be the cause then - if you believe this to be a bug please create a reproducer and open a bug report 👍

[mlakmal]

@jbroma it looks like ScriptManager native module is internally caching http responses when we use NSMutableURLRequest.

when i added below code to avoid local caching, it started to work as expected.

request.cachePolicy = NSURLRequestReloadIgnoringLocalCacheData; 

may be this is duplicating the cached files on local device.
is this something we can update as part of config? (maybe new feature request)