Question about docs, bi-directional communication for dynamic imports
See original GitHub issueI’m trying to share state between two React apps (one host, one remote), where the remote shares a button, and the host has a set of functions that can be triggered by clicking the button in the remote. I’m using dynamic loading. But when I click a button from the remote, I get props.<custom function> is not defined
followed by some CORS error (Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development.
, which I wasn’t sure if it was a red herring). The initial loading of the remote container works as expected (i.e. I’m able to see the button). All of this is done locally, if it matters.
Anywho, in the docs, it states the following:
Uncaught TypeError: fn is not a function
You are likely missing the remote container, make sure it's added. If you have the container loaded for the remote you are trying to consume, but still see this error, add the host container's remote container file to the HTML as well.
I may just be stupid, but it’s not entirely clear to me this part: the host container's remote container file to the HTML as well
. Am I supposed to add the expected path of the remoteEntry.js
to the remote’s public/index.html
head? Or define it somewhere in the webpack.config.js
file, like HtmlWebpackPlugin
? Any examples would really help. Thanks!
Bonus question: Would something like this enable me to provide typings for my host’s functions? Or is that not a thing?
This is my host: https://github.com/KaotoIO/kaoto-ui/blob/main/webpack.common.js#L88 Dynamic import script: https://github.com/KaotoIO/kaoto-ui/blob/main/src/components/import.ts Lazy loading happens here: https://github.com/KaotoIO/kaoto-ui/blob/main/src/components/StepViews.tsx#L178
Here is my remote: https://github.com/kahboom/cosmosdb-source/blob/main/webpack.config.js
Issue Analytics
- State:
- Created a year ago
- Comments:7 (4 by maintainers)
Top GitHub Comments
Hey check privjs. We have a free module federation TS integration. Would love more feedback on it
I’m glad you got it working. Enhanced will get more attention soon. I’m going to be basing a lot of my ecosystems ontop of a better api.
We are getting very close to launching http://Medusa.codes - which would give give you a dashboard to command and control federation on demand for various environments. One thing high on the list is pair it with a chrome extension so that you can switch remotes on your browser in any environment you want, without impacting that environment.
I believe the main thing to nail is some way to harness more power given the ease of doing so.
The version management that I’m testing at the moment uses the git commit Sha as its version. So the remote name and entry is hashed - multiple versions of the module can exist on the page at once without collisions (nested remotes) Idea being I can pick any commit hash I’ve pushed to GitHub and use it anywhere else without needing to redeploy.
Don’t use bundle loader. I’d start with removing that. Fn is not a function, usually caused by either a chunk loading from the wrong origin. Like public path isn’t set to auto. Or if you are using dynamic remotes. Ensure the factory actually returns exports you’d expect