Open VaclovasVicius opened 1 year ago
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.
same issue, @VaclovasVicius @diogoparente did you solve it?
Bot detected the issue body's language is not English, translate it automatically. π―ππ»π§βπ€βπ§π«π§πΏβπ€βπ§π»π©πΎβπ€βπ¨πΏπ¬πΏ
same issue, @VaclovasVicius @diogoparente did you solve it?
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"]
Versions
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:
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?