Vite + module federation + nested react routes (react-router-dom)

[VaclovasVicius]

Versions

• vite-plugin-federation: 1.2.3
• vite: 4.2.1

Reproduction

Host and remote apps are using react-router-dom for nested routing. Separatelly, applications are working correctly, but if shell app launches remote applications, components which includes are getting error: react.development.js:1618 Uncaught TypeError: Cannot read properties of null (reading 'useContext') at Object.useContext (react.development.js:1618:21) at useOutlet (hooks.tsx:242:22) at Outlet (components.tsx:236:10) at renderWithHooks (react-dom.development.js:16305:18) at mountIndeterminateComponent (react-dom.development.js:20074:13) at beginWork (react-dom.development.js:21587:16) at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16) at invokeGuardedCallback (react-dom.development.js:4277:31) at beginWork$1 (react-dom.development.js:27451:7) useContext @ react.development.js:1618 useOutlet @ hooks.tsx:242 Outlet @ components.tsx:236 renderWithHooks @ react-dom.development.js:16305 mountIndeterminateComponent @ react-dom.development.js:20074 beginWork @ react-dom.development.js:21587 callCallback2 @ react-dom.development.js:4164 invokeGuardedCallbackDev @ react-dom.development.js:4213 invokeGuardedCallback @ react-dom.development.js:4277 beginWork$1 @ react-dom.development.js:27451 performUnitOfWork @ react-dom.development.js:26557 workLoopSync @ react-dom.development.js:26466 renderRootSync @ react-dom.development.js:26434 recoverFromConcurrentError @ react-dom.development.js:25850 performConcurrentWorkOnRoot @ react-dom.development.js:25750 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 react-dom.development.js:18687 The above error occurred in the component:

at Outlet (http://localhost:5001/node_modules/.vite/deps/react-router-dom.js?v=99faf894:3423:26)
at div
at App
at Suspense
at RenderedRoute (http://127.0.0.1:5001/node_modules/.vite/deps/react-router-dom.js?v=99faf894:3115:5)
at Outlet (http://127.0.0.1:5001/node_modules/.vite/deps/react-router-dom.js?v=99faf894:3423:26)
at Suspense
at main
at div
at Root
at RenderedRoute (http://127.0.0.1:5001/node_modules/.vite/deps/react-router-dom.js?v=99faf894:3115:5)
at RenderErrorBoundary (http://127.0.0.1:5001/node_modules/.vite/deps/react-router-dom.js?v=99faf894:3078:5)
at Routes (http://127.0.0.1:5001/node_modules/.vite/deps/react-router-dom.js?v=99faf894:3483:5)
at Router (http://127.0.0.1:5001/node_modules/.vite/deps/react-router-dom.js?v=99faf894:3430:15)
at RouterProvider (http://127.0.0.1:5001/node_modules/.vite/deps/react-router-dom.js?v=99faf894:3319:5)

All applications has shared: ['react', 'react-dom', 'react-router-dom'], already added

Steps to reproduce

What is Expected?

React-router-dom should work in MFE environment

I've used existing example with webpack nested routing, so it is working, not working version is just with vite + module federation. Why this is happening and is it possible to fix this?

[diogoparente]

Hey mate, I was doing the same experiment and got it working in this repo. Feel free to take a look around as it might help you.

[adirzoari]

same issue, @VaclovasVicius @diogoparente did you solve it?

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

same issue, @VaclovasVicius @diogoparente did you solve it?

[acusset]

I had a similar issue but using wouter as Routing library for my react application.

I solved it by adding wouter as part of the shared dependency for both the remote and local applications. Try adding react-router-dom in your vite.config.js, on both sides.

// ...
shared: ["react", "react-dom", "react-router-dom"]