Invalid Hook Call Error When Using React and Vite Plugin Federation only when "Shared Modules" is used

[Aya Lithy]

Versions

• vite-plugin-federation: v1.1.8
• vite: v5.2.0
• React version: v18.2.0
• React DOM version: v18.2.0

Description:
I'm encountering a persistent issue with Vite Plugin Federation where an "Invalid hook call" error occurs when using shared modules. Despite following the recommended configurations and ensuring consistent versions across host and remote applications, the error persists.

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (chunk-EJS4DAEO.js?v=16a5b6a1:18984:17)
    at Object.useEffect (chunk-XJKZ76WU.js?v=16a5b6a1:1361:29)
    at QueryClientProvider (__federation_expose_…BMrPUZ5e.js:1721:11)
    at Xh (__federation_shared_…nRPkV28s.js:203:137)
    at Wk (__federation_shared_…nRPkV28s.js:326:339)
    at Vk (__federation_shared_…nRPkV28s.js:316:393)
    at Uk (__federation_shared_…nRPkV28s.js:316:322)
    at Jk (__federation_shared_…nRPkV28s.js:316:181)
    at Ok (__federation_shared_…-nRPkV28s.js:307:88)
    at Hk (__federation_shared_…nRPkV28s.js:304:432)

Reproduction

Link to reproduction repository

Steps to reproduce

1. Clone the repo and then setup host and remote apps with the provided instructions on the repo.
2. Build the remote app using build:remote script.
3. Serve the remote app as well as running the host app using yarn dev.
4. Open the host application localhost:5000 and observe the console for the "Invalid hook call" error.

What is Expected?

The host application should load the remote application without encountering any errors.

What is actually happening?

Although the remote app works fine, the host application encounters an "Invalid hook call" error, indicating issues with how hooks are being called. This error suggests potential problems with multiple instances of React or improper sharing of dependencies.

Any guidance or fixes would be greatly appreciated. Thank you for your assistance!