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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions