search

originjs / vite-plugin-federation

Module Federation for vite & rollup
Other
2.33k stars 239 forks source link

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

Open Aya-Lithy opened 3 months ago

Aya-Lithy commented 3 months ago

Versions

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!

renanyudimt commented 1 month ago

Any update ?

facing the same issue, already lose some hair and sanity trying to solve it

maitrungduc1410 commented 4 weeks ago

facing same issue...