singleton: true not working - each remote bundles its own copy of shared modules

[nicatabdullay3v]

I have a host app with multiple remotes using @module-federation/vite. Despite configuring singleton: true for all shared modules, each remote bundles its own full copy of react-oidc-context instead of using the host's version.

When I inspect the react-oidc-context chunk from any remote in Network tab, it contains the full library code (not a stub):
javascript// This is inside remote's bundle - should be a stub!

var AuthContext = React.createContext(void 0);
var AuthProvider = (props) => { ... full implementation ... }

This means useAuth() returns undefined in remotes because each remote creates its own AuthContext which has no AuthProvider.
Strange behavior

I have TWO host apps - admin-portal and web-portal - with identical configs using the same remotes. web-portal works perfectly (one copy of react-oidc-context), admin-portal breaks (multiple copies).

Config (same in all apps)
shared: {
'react-oidc-context': { singleton: true },
'oidc-client-ts': { singleton: true },
'react': { singleton: true },
'react-dom': { singleton: true },
'react-router-dom': { singleton: true },
'react-redux': { singleton: true },
'@reduxjs/toolkit': { singleton: true },
}

Version

@module-federation/vite: ^1.12.3` (latest)

Expected behavior

Remotes should load a small stub that references the host's singleton

Actual behavior

Remotes load full library and create separate React contexts

Error messages

Error 1 (most common):

TypeError: Cannot read properties of undefined (reading 'user')
at usePermissions (http://localhost:4006/assets/constants.js:81:28)
at ProtectedComponent (http://localhost:4006/assets/constants.js:99:49)
at Nh (http://localhost:4007/assets/index.js:215:137)

Note: `usePermissions` is from port 4006 (games remote) but React renderer `index.js` is from port 4007 (tournaments remote). This confirms React instances are not shared.

**Error 2**:
AuthProvider context is undefined, please verify you are calling useAuth() as child of a <AuthProvider> component.

**Error 3** (when using `import: false`):

Error: Shared module 'react-oidc-context' must be provided by host

With only 1 remote connected — works fine
With 2+ remotes — broken
Another host (web-portal) with identical config and same remotes — works perfectly
Errors happen consistently on page load, not just on fast reload
Network tab shows multiple copies of react-oidc-context loaded from different remotes despite singleton: true


Host:
import { federation } from '@module-federation/vite'
import react from '@vitejs/plugin-react'
import path from 'node:path'
import { defineConfig, loadEnv } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())

  return {
    resolve: {
      alias: {
        '@privy-io/react-auth': path.resolve(
          __dirname,
          'node_modules/@privy-io/react-auth'
        ),
        '@solana-program/memo': path.resolve(
          __dirname,
          'node_modules/@solana-program/memo'
        ),
        '@solana-program/system': path.resolve(
          __dirname,
          'node_modules/@solana-program/system'
        ),
        '@solana-program/token': path.resolve(
          __dirname,
          'node_modules/@solana-program/token'
        ),
        '@solana/kit': path.resolve(__dirname, 'node_modules/@solana/kit'),
      },
    },
    build: {
      target: 'es2022',
    },
    esbuild: {
      target: 'es2022',
    },
    optimizeDeps: {
      esbuildOptions: {
        target: 'es2022',
      },
    },
    plugins: [
      react({
        jsxImportSource: '@emotion/react',
      }),
      tsconfigPaths(),
      federation({
        name: 'admin-portal-host',
        manifest: true,
        dts: false,
        remotes: {
          gamers: {
            type: 'module',
            name: 'gamers',
            entry: env.VITE_GAMERS_MICROSERVICE_BUILD_URL,
          },
          games: {
            type: 'module',
            name: 'games',
            entry: env.VITE_GAMES_MICROSERVICE_BUILD_URL,
          },
        },
        shared: {
          '@emotion/react': {
            singleton: true,
          },
          '@emotion/styled': {
            singleton: true,
          },
          '@mui/icons-material': {
            singleton: true,
            version: '6.5.0',
          },
          '@mui/material': {
            singleton: true,
          },
          '@reduxjs/toolkit': {
            singleton: true,
          },
          '@company/company-reactjs-ui': {
            singleton: true,
          },
          axios: {
            singleton: true,
          },
          dayjs: {
            singleton: true,
          },
          'jwt-decode': {
            singleton: true,
            version: '4.0.0',
          },
          notistack: {
            singleton: true,
          },
          react: {
            singleton: true,
          },
          'react-dom': {
            singleton: true,
          },
          'react-oidc-context': {
            singleton: true,
          },
          'react-redux': {
            singleton: true,
          },
          'react-router-dom': {
            singleton: true,
          },
          '@privy-io/react-auth': {
            singleton: true,
          },
          '@solana-program/memo': {
            singleton: true,
          },
          '@solana-program/system': {
            singleton: true,
          },
          '@solana-program/token': {
            singleton: true,
          },
          '@solana/kit': {
            singleton: true,
          },
        },
      }),
    ],
    server: {
      allowedHosts: [
        'admin-portal.dev.company.com',
        'admin-portal.test.company.com',
        'admin-portal.company.com',
      ],
    },
  }
})

REMOTE:
import { federation } from '@module-federation/vite'
import react from '@vitejs/plugin-react'
import { defineConfig, loadEnv } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
import { configDefaults } from 'vitest/config'

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())

  return {
    plugins: [
      react({
        jsxImportSource: '@emotion/react',
      }),
      tsconfigPaths(),
      federation({
        manifest: true,
        dts: false,
        name: 'gamers',
        filename: 'gamers-build.js',
        exposes: {
          './routes': './src/pages/AppRouter/constants',
        },
        shared: {
          react: {
            singleton: true,
          },
          'react-dom': {
            singleton: true,
          },
          'react-router-dom': {
            singleton: true,
          },

          'react-redux': {
            singleton: true,
          },
          '@reduxjs/toolkit': {
            singleton: true,
          },

          'react-oidc-context': {
            singleton: true,
          },

          '@mui/material': {
            singleton: true,
          },
          '@mui/icons-material': {
            singleton: true,
          },
          '@emotion/react': {
            singleton: true,
          },
          '@emotion/styled': {
            singleton: true,
          },

          '@company/company-reactjs-ui': {
            singleton: true,
          },

          axios: {
            singleton: true,
          },
          dayjs: {
            singleton: true,
          },
          'jwt-decode': {
            singleton: true,
          },
          notistack: {
            singleton: true,
          },
        }
      }),
    ],
    server: {
      allowedHosts: [
        'admin-gamers.dev.company.com',
        'admin-gamers.test.company.com',
        'admin-gamers.company.com',
      ],
      cors: {
        origin: [
          'https://admin-portal.dev.company.com',
          'https://admin-portal.test.company.com',
          'https://admin-portal.company.com',
          'http://localhost:5173',
        ],
        methods: 'GET, HEAD, PUT, PATCH, POST, DELETE',
      },
    },
    build: {
      modulePreload: false,
      target: 'esnext',
      minify: env.VITE_ENVIRONMENT === 'prod',
      cssCodeSplit: false,
    },
    test: {
      ...configDefaults,
      globals: true,
      environment: 'jsdom',
      setupFiles: './test/setup.ts',
    },
  }
})