Plugin is not working with rtk query hooks

[Sasha-meow]

Versions

• vite-plugin-federation: ^1.3.2 (host and remote)
• vite: ^4.4.5 (host and remote)
• react, react-dom: ^18.2.0 (host and remote)
• @reduxjs/toolkit: ^1.9.5 (host and remote)
• node: v18.17.1
• npm: 9.6.7

Reproduction

1. clone repo from: https://github.com/Sasha-meow/federation
2. To start remote app go to folder "remote", run npm i, then npm run build and npm run preview
3. To start host app go to folder "federation", run npm i and npm run dev

Steps to reproduce

Button component in remote app includes useGetPokemonsQuery hook (made by redux toolkit). When you start host app - you can see the error: Uncaught TypeError: Cannot read properties of null (reading 'useMemo')

It seems, that plugin doesn`t like something in useQuery hook inside rtk (you can find in call stack from screenshot)

I tried to install previos versions of your plugin - it didn't help me; tried to change shared dependencies config - it didn't help me too.

If remote app doesn't include rtk query hook, everything works fine (you can delete hook from remote>src>component>ButtonCustom and check it). If replace this hook to native function of the endpoint: everything works fine (you can delete query hook and uncomment dispatch and const { data } = await dispatch(baseApi.endpoints.getPokemons.initiate(undefined)) on 18 line in remote>src>component>ButtonCustom and check it)

[omarviano]

I have the same problem. Or rather, I think it's the same problem.

[phogel]

It seems like you're initialising the store too early, outside of the component, here: https://github.com/Sasha-meow/federation/blob/main/remote/src/component/MainContent/component.tsx#L12

If you move this line into the component body like:

const MainContent = ({ title }: { title: string }) => {
    const store = useMemo(() => setupStore(), []);
    ...
}

it works.

[Sasha-meow]

It seems like you're initialising the store too early, outside of the component, here: https://github.com/Sasha-meow/federation/blob/main/remote/src/component/MainContent/component.tsx#L12

If you move this line into the component body like:

const MainContent = ({ title }: { title: string }) => {
    const store = useMemo(() => setupStore(), []);
    ...
}

it works.

Actually, it didn't help me( Same error But you are right, store must be in component, I updated code

[adirzoari]

@Sasha-meow same issue, did you find a solution?

[timwuhaotian]

Having the same issue using https://lexical.dev/

[timwuhaotian]

It seems like you're initialising the store too early, outside of the component, here: https://github.com/Sasha-meow/federation/blob/main/remote/src/component/MainContent/component.tsx#L12 If you move this line into the component body like:

const MainContent = ({ title }: { title: string }) => {
    const store = useMemo(() => setupStore(), []);
    ...
}

it works.

Actually, it didn't help me( Same error But you are right, store must be in component, I updated code

Did you find a solution?