question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question about docs, bi-directional communication for dynamic imports

See original GitHub issue

I’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:closed
  • Created a year ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
ScriptedAlchemycommented, Aug 3, 2022

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.

1reaction
ScriptedAlchemycommented, Jul 26, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Dynamic imports - The Modern JavaScript Tutorial
The import(module) expression loads the module and returns a promise that resolves into a module object that contains all its exports. It can...
Read more >
[Question] Dynamic imports #661 - evanw/esbuild - GitHub
I'm experimenting with using esbuild for a page-based router for React (work here: https://github.com/zaydek/page-based-router) and I just ...
Read more >
GraphX - Spark 3.3.1 Documentation
To support graph computation, GraphX exposes a set of fundamental operators (e.g., subgraph, joinVertices, and aggregateMessages) as well as an optimized ...
Read more >
ES6: Conditional & Dynamic Import Statements - Stack Overflow
The reason I am trying to do this is that I have a lot of imports for a number of "pages" and they...
Read more >
SolarWinds Port Requirements
Service, Bidirectional. The port used for communication between the Additional polling engine and the main polling engine.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found