Skip to content

Host and remote dont share the same react-router-dom instance #729

@nmtri-dev

Description

@nmtri-dev

Versions

  • vite-plugin-federation: 1.4.1
  • vite: 7.0.0

Steps to reproduce

Host's vite config

...
plugins: [
    react(),
    federation({
      name: 'orchestrator',
      remotes: {
        homepage: 'http://localhost:3001/assets/remoteEntry.js',
        authentication: 'http://localhost:3002/assets/remoteEntry.js',
      },
      shared: {
        //@ts-ignore
        'react': { singleton: true, eager: true, requiredVersion: false },
        'react-dom': { singleton: true, eager: true, requiredVersion: false },
        'react-router-dom': { singleton: true, eager: true, requiredVersion: false },
        'react-i18next': { singleton: true, eager: true, requiredVersion: false },
        'i18next': { singleton: true, eager: true, requiredVersion: false },
      },
    }),
  ],
...

Remote's vite config

...
plugins: [
    react(),
    federation({
      name: 'authentication',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/app/app',
      },
      shared: {
        //@ts-ignore
        'react': { singleton: true, eager: true, requiredVersion: false },
        'react-dom': { singleton: true, eager: true, requiredVersion: false },
        'react-router-dom': { singleton: true, eager: true, requiredVersion: false },
        'react-i18next': { singleton: true, eager: true, requiredVersion: false },
        'i18next': { singleton: true, eager: true, requiredVersion: false },
      },
    }),
  ],
...

The remote app is put inside router of host

        <Routes>
          <Route
            path="/auth/*"
            element={
              <Suspense fallback={<div>{t('loading.authentication')}</div>}>
                <AuthenticationApp />
              </Suspense>
            }
          />
        </Routes>

What is Expected?

Inside remote app, when I use the hook useInRouterContext, it should returns true.

What is actually happening?

But currently, the hook useInRouterContext always return false.

When I compare the instances of react-router-dom in host and remote, they are not the same. I think that's the reason make the hook useInRouterContext returns false.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions