useSWRConfig doesn't pass Global config down to federated modules

[agentmilindu]

Bug report

I'm trying to use SWRConfig & useSWRConfig in my micro-frontend application. I was able to get useSWR() in Federated Module working without an issue with configs defined in the Main Application via <SWRConfig /> , but when I try to get the config from useSWRConfig hook in the Federated Module , it's giving me the following error.

Uncaught TypeError: useSWRConfig is not a function

useSWRConfig is simply undefined. I understand useSWRConfig is making use of React Contexts and it doesn't work through federated modules. However, if the useSWR(url) was able to work correctly using the config set via SWRConfig, then that means the configs got passed from the Main Application to the Federated Module, right?

Description / Observed Behavior

useSWRConfig was undefined.

Expected Behavior

useSWRConfig should not be undefined and should be able to provide the Global Config down to the Federated Modules also.

Repro Steps / Code Example

A simplified setup of my application is as follows.

Main application

import { SWRConfig } from 'swr';
import fetcher from './fetcher';

export const MyFederatedComponent = lazy(() => import('@foo/MyFederatedComponent'));

export const MyFederatedModule = () => (
    <SWRConfig
        value={{
            fetcher,
        }}
    >
        <Suspense fallback={<div>Loading... </div>}>
            <MyFederatedComponent />
        </Suspense>
    </SWRConfig>
);

Federated module

import { useSWRConfig } from 'swr';

export const MyFederatedComponent = () => {
    const { fetcher } = useSWRConfig(); // This is the one making problems
   const { isLoading } = useSWR('foo/baa');

    return isLoading? <div>Loading</div>:<div>Loaded</div>;
};

My Vite config in the Main looks like this.

export default defineConfig({
    plugins: [
        ...
        react(),
        federation({
            name: 'foo',
            remotes: [
                {
                    '@foo': {
                        external: `Promise.resolve(window.foo)`,
                        from: 'vite',
                        externalType: 'promise',
                    },
                },
            ],
            shared: ['react', 'react-dom', 'react-router-dom', 'swr'],  // SWR is added to the shared
        }),

My Vite config in the Federated Module looks like this.

export default defineConfig({
    plugins: [
        react(),
        tsconfigPaths(),
        federation({
            name: 'foo',
            filename: 'foo.js',
            exposes: {
                './MyFederatedComponent': './src/views/MyFederatedComponent/MyFederatedComponent.tsx',
            },
            shared: ['react', 'react-dom', 'react-router-dom', 'swr'], // SWR is added to the shared
        }),
    ],

Additional Context

SWR version. 2.0.0

[NipunaMarcus]

So both side ( Host app and federated module) using the same version of swr in this case ?

[agentmilindu]

Yes, both are using 2.0.0

[zcs19871221]

Is there any progress on this issue? I had the same problem, I am using 2.2.1

[nvhungkt]

I think you're using vite-module-federation v1.2, try downgrading it to v1.1.14

[koba04]

Could you try this again with v2.2.5?