Bug Report: Multiple Instances of React and React-Router-DOM in Host and Remote

[hitesh-k-ow]

Description
When attempting to use shared versions of react, react-dom, and react-router-dom across host and remote applications, the host and remote still end up with multiple instances of these libraries. This results in the error:

React Error 321: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

The issue persists even when using the shared configuration in the @module-federation/vite plugin.

Configuration
Host Config:

import { defineConfig } from 'vite';
import federation from '@originjs/vite-plugin-federation';;

export default defineConfig({
  plugins: [
    federation({
      name: 'host',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
      },
      shared: {
        react: { requiredVersion: "^18.3.1" },
        'react-dom': { requiredVersion: "^18.3.1" },
        'react-router-dom': { requiredVersion: "^6.26.1" },
      },
    }),
  ],
});

Remote Config:

import { defineConfig } from 'vite';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    federation({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Component': './src/main',
      },
      shared: {
        react: { requiredVersion: "^18.3.1" },
        'react-dom': { requiredVersion: "^18.3.1" },
        'react-router-dom': { requiredVersion: "^6.26.1" },
      },
    }),
  ],
});

Steps to Reproduce
Create a host and remote application using vite and the @module-federation/vite plugin.
Share react, react-dom, and react-router-dom as shown in the configuration above.
Use a component from the remote app in the host app.
Run the host application and navigate to a route using the remote component.

Expected Behavior
The host and remote applications should share the same instance of react, react-dom, and react-router-dom. There should be no multiple instances or React Error 321.

Actual Behavior
The host and remote applications result in multiple instances of react, react-dom, and react-router-dom, leading to React Error 321.

Workaround
Using the singleton option provided by the @module-federation/vite plugin resolves the issue. The updated configuration is as follows:

Updated Host Config:

shared: {
  react: { singleton: true, requiredVersion: "^18.3.1" },
  'react-dom': { singleton: true, requiredVersion: "^18.3.1" },
  'react-router-dom': { singleton: true, requiredVersion: "^6.26.1" },
}

Updated Remote Config:

shared: {
  react: { singleton: true, requiredVersion: "^18.3.1" },
  'react-dom': { singleton: true, requiredVersion: "^18.3.1" },
  'react-router-dom': { singleton: true, requiredVersion: "^6.26.1" },
}

Request
Please update the documentation to include the singleton option as part of the recommended configuration for shared dependencies like react-router-dom. This will help others avoid similar issues when sharing dependencies between host and remote applications.

Environment
@module-federation/vite: [version here]
vite: [version here]
react: 18.3.1
react-dom: 18.3.1
react-router-dom: 6.26.1
Additional Context
Links to React Error 321 and Module Federation Documentation.