[Bug]: Cannot read properties of undefined (reading 'push')
Describe the bug
try to onboard module federation but get weird error. When loading remote from the host, error pops:
the final stacktrace of this error ends up somewhere in react dom client: ReactSharedInternals.actQueue is undefined
What could go wrong? According to chatgpt it might caused by mismatched react version, but I ensured the react versions of host and remote to be 19.1.0
Version
v6.2.6
Reproduction
/
Relevant log output
Validations
- [x] Read the docs.
- [x] Read the common issues list.
- [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [x] The provided reproduction is a minimal reproducible example of the bug.
Hi 👋 can you share a basic reproduction project? I don't have bandwidth to tackle it now, but it can help contributors.
@gioboa I have the same issue. I created a basic project to reproduce it — you can check it here: https://github.com/hoc-ht/module-federation-vite-issue
I have the same problem after upgrading from React 18 to version 19.
I also have same problem after upgrading react to v19.
So, I have also run into this issue after upgrading to React 19.
Interestingly enough it seems to go away and work as expected if both the host and the remote are run in Vite preview mode.
I tested the above on your minimal reproduction @hoc-ht and it worked without any issues:
The developer experience is obviously worse with this approach, but it is a workaround until we can figure out and fix what's causing this issue.
I think it may be something with differences in how Vite is serving react bundles in dev vs preview mode.
It is also worth noting that it sometimes works when both host and remote are run in dev mode, but this is FAR more flakey but also hints towards my above theory about different bundling.
I am not sure how to even really begin fixing this, but if you could point me in a direction @gioboa I'd be willing to give it a bash.
I can also confirm that this issue is still present in versions 1.6.0, 1.7.0 and 1.7.1
I'd be willing to give it a bash.
Thanks for your help @NoxRammus I need to clone the @hoc-ht repo and look at it. Due to lack of time, I haven't done it yet.
I cloned the @hoc-ht and it's working fine with React 19 with dev and preview mode.
I changed only one thing, I defined the port in the remote npm script "dev": "vite --port 4174",
I cloned the @hoc-ht and it's working fine with React 19 with dev and preview mode. I changed only one thing, I defined the port in the remote npm script "dev": "vite --port 4174",
@gioboa Thats really strange, are you running one in preview and the other in dev or both in dev / both in preview?
When I run remote in preview and host in dev I get the issue (even with your update to the port):
If the remote and host are run in the same way (Both preview or Both dev) then it seems to work properly.
I see. We need to run both in the same way because dev and preview are working differently
Is there any update on this Issue?
I see. We need to run both in the same way because dev and preview are working differently
I think this is the resolution @fischer-philipp
It seems like it is intended behavior (correct me if I'm wrong @gioboa), so the solution is to run remotes and hosts in the same 'mode' be that preview or development.
@NoxRammus makes sense. Running both locally does work in my setup as well.
However with react 18 and webpack config, I was able to load remotes from built and hosted remotes in my local dev environment. Doing this with react 19 and the module federation vite plugin I get the same error as above. It works when host and remote both run deployed in production and both running locally. But I cant find a way to mix them. Is this simply not possible?
@NoxRammus makes sense. Running both locally does work in my setup as well.
However with react 18 and webpack config, I was able to load remotes from built and hosted remotes in my local dev environment. Doing this with react 19 and the module federation vite plugin I get the same error as above. It works when host and remote both run deployed in production and both running locally. But I cant find a way to mix them. Is this simply not possible?
I’m really looking forward to it too. We can’t run all the remotes locally when you’re developing—especially when you have a lot of remotes.
Sorry for the ping @underfin You contributed in this project recently and you are contributing to Vite/Rolldown too
Is it possible to achieve this kind of behaviour?
@hoangbaophu89
We decided to migrate to rspack and rsbuild, which has in my opinion a better module federation integration.
I believe in the vite module federation plugins, the eager loading option of shared dependencies is missing. That was the gamechanger in rsbuild, which made everything work.
We decided to migrate to rspack and rsbuild
It's a fair decision, those packages are maintained directly from the whole mfe team. 👏💪
We decided to migrate to rspack and rsbuild, which has in my opinion a better module federation integration.
I believe in the vite module federation plugins, the eager loading option of shared dependencies is missing. That was the gamechanger in rsbuild, which made everything work.
thank for your valuable infor . i will read document and play around
hello Team,
I confirmed that work when doing with rsbuild.
I also encountered a similar error in production build mode (it works fine in development mode).
But when I changed the name option to a random value in the federation (of the host), it worked.
I’m not sure whether the issue lies in the name option or the host in development mode versus the remote in production mode.
As there's been no activity for 30 days, this issue has been flagged as stale. If you'd like it to remain open, please add a comment within the next 7 days. Thank you.