Under the micro-frontend qiankun framework, setting sandbox to false behaves abnormally.

[callqh]

Describe the bug

I set sandbox: false under the main application of micro frontends, and then I have two sub-applications. In application A, I create instances and load remotely at runtime. When I first open the page, it displays normally in application A, but after switching to application B, an error occurs. Refreshing the page will make it work normally again, but switching from B back to A will still result in an error: Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

I suspect it's because some fields set on the window property after createInstance are not destroyed in time when switching applications, causing application B to use snapshots or caches from application A. So I would like to ask if there is a way to promptly clear some caches generated by the runtime when the sub-application is unmounted?

Reproduction

Used Package Manager

yarn

System Info

System:
    OS: macOS 15.5
    CPU: (10) arm64 Apple M2 Pro
    Memory: 170.91 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.20.1 - ~/.nvm/versions/node/v16.20.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v16.20.1/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.1/bin/npm
    bun: 0.6.13 - ~/.bun/bin/bun
  Browsers:
    Safari: 18.5

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[callqh]

• Sub-application A

// runtime 
export const mf = createInstance({
  name: 'A',
  remotes: [],
  shared: {
    'react': {
      version: '17.0.2',
      lib: () => React,
      shareConfig: {
        singleton: true,
        requiredVersion: '17.0.2',
        eager: true,
        strictVersion: true,
      },
    },
    'react-dom': {
      lib: () => ReactDOM,
      version: '17.0.2',
      shareConfig: {
        singleton: true,
        requiredVersion: '17.0.2',
        eager: true,
        strictVersion: true,
      },
    },
    'antd': {
      version: '4.22.8',
      lib: () => antd,
      shareConfig: {
        singleton: true,
        eager: true,
        requiredVersion: '4.22.8',
      },
    },
  },
});

mf.registerRemotes(
  [
    {
      name: 'FieldModal',
      entry: 'http://localhost:3000/mf-manifest.json',
    },
  ],
  { force: true },
);
// load component
const FieldModal = (props) => {
  const RemoteComp = React.lazy(() => mf.loadRemote('FieldModal/FieldModal').then((comp) => ({ default: comp.FieldModal })));

  return (
    <React.Suspense fallback={<div>loading</div>}>
      <RemoteComp {...props} />
    </React.Suspense>
  );
};

• Sub-application B

// runtime 
export const mf = createInstance({
  name: 'B',
  remotes: [],
  shared: {
    'react': {
      version: '17.0.2',
      lib: () => React,
      shareConfig: {
        singleton: true,
        requiredVersion: '17.0.2',
        eager: true,
        strictVersion: true,
      },
    },
    'react-dom': {
      lib: () => ReactDOM,
      version: '17.0.2',
      shareConfig: {
        singleton: true,
        requiredVersion: '17.0.2',
        eager: true,
        strictVersion: true,
      },
    },
    'antd': {
      version: '4.22.8',
      lib: () => antd,
      shareConfig: {
        singleton: true,
        eager: true,
        requiredVersion: '4.22.8',
      },
    },
  },
});

mf.registerRemotes(
  [
    {
      name: 'FieldModal',
      entry: 'http://localhost:3000/mf-manifest.json',
    },
  ],
  { force: true },
);
// load component
const FieldModal = (props) => {
  const RemoteComp = React.lazy(() => mf.loadRemote('FieldModal/FieldModal').then((comp) => ({ default: comp.FieldModal })));

  return (
    <React.Suspense fallback={<div>loading</div>}>
      <RemoteComp {...props} />
    </React.Suspense>
  );
};

The above configurations will report the error mentioned above when switching between A/B sub-applications.

However, when I change the name of the FieldModal component to another one, but the code remains the same, it can switch normally.

// Modify FieldModal to TestComp
exposes: {
 // './FieldModal': './src/entry.tsx',  
    './TestComp': './src/entry.tsx'
  }
// loadRemote
 const RemoteComp = React.lazy(() => mf.loadRemote('FieldModal/TestComp').then((comp) => ({ default: comp.FieldModal })));

[callqh]

So I think that using only remote.name for caching will lead to this problem. Shouldn't we add scope for caching, like scope:remote.name, so that application A will only use A:FieldModal and not B's? Currently, using only remote.name will cause FieldModal to be used by both applications simultaneously?

[ScriptedAlchemy]

setGlobalFederationInstance(createdInstance)

[Nsttt]

Maybe should be fixed after #3975

[callqh]

setGlobalFederationInstance(createdInstance)

Do I need to call this method in each sub-application?