Видео

That is basically the purpose of federation and it's container entry. Federation needs to know about the components in order to split the bundles correctly. This could cause issues at runtime

It should work, what is the error? If you register a remote in the plugin, I believe it loads automatically. You could try the v2 webpack plugin to see if it helps

​@@russellcanfield Thanks, will try checking the webpack plugin version. The error I am seeing when trying to register remotes for the same remoteEntry.js in both the plugin and runtime is "Container initialization failed as it has already been initialized with a different share scope".

@@yjk5737 Ok, make sure both are using the "default" share scope

@@russellcanfield I don't have any packages listed in "shared". It seemed like share scope would be something specific to items listed under "shared", but I'll admit I'm not too familiar with that part.

@@yjk5737 it seems like the remote is registered, is it in your plugin configuration in your webpack config?

Yep, you can check out my other video on sharing state but it will work the same.

You can share context, now the problem with sharing a global reference is that react won't re-render I believe because you aren't going through their API. There are a few approaches, you can useSynxExternalStore and sync the contexts - which will re-render as you expect, this can be done with a simple "event bus" approach as well to decouple things. You could also use an external package and share it as a singleton, the host can mount it in the DOM and you can use hooks to interface with the context as if the remote modules have it mounted - except you would not mount it in the remote modules.

Also is there a github link for the Jotai example?

@@Dadaadad268 I apparently do not :( you can use a similar approach with Jotai, share some store atoms globally by reference (singleton module), useSyncExternal store, or use Jotai's subscription feature

@@russellcanfield Thanks Russell. I'm trying the Jotai approach putting the reference on the window object. The imported module isn't updating the state though. I'm building the imported module first and running it in vite preview, the core app that imports it is running in dev mode. Should this still work?

Updating the window object doesn't re-render the component, so this would be the issue...

@@christmas7056 hey! Sure I have several videos under this playlist that should help

@@russellcanfield Found it, Thank you very much

Thanks! Without trying it, I think the hook beforePreloadRemote could be used to serve a "known good remote" - but otherwise you need to handle it in the UI framework like React with maybe an error boundary

Hi, Yes you should be able to do it through the federation runtime

@@BleedingDev sure any specific style library? I have a repo for a tailwind one with rslib

​@@russellcanfield I used default template from Rslib and it seems to work, but now I struggle with types. :D It seems that my @mf-types.d.ts is wrong, but I am only guessing. I'll probably make a repo, where everything is clearly visible, rather than spamming the comments here. :) Content of it: export type RemoteKeys = 'REMOTE_ALIAS_IDENTIFIER'; type PackageType<T> = T extends 'REMOTE_ALIAS_IDENTIFIER' ? typeof import('REMOTE_ALIAS_IDENTIFIER') :any; PS: Tailwind example would be awesome. That's my primary style choice. 🤩🤩

You may need to set the public path to auto for remotes and “/“ for the host. What errors are you seeing?

@@russellcanfield Tahnk you for your reply. Right now from the example in the video I have: virtual:mf-REMOTE_ENTRY_ID:28 Uncaught Error: Module ./modulepreload-polyfill does not exist in container. at Module.getExposes (virtual:mf-REMOTE_ENTRY_ID:28:44

And by public path I assume you mean base? not working sadly

@@SymyonYY Are you using module preloads? If you are, try to limit them just to the libraries you are sharing such as react for example. You need the function implementation of module preload

@@russellcanfield THe index.html in the dist folder does preload modules, particullarily for the runtimeInit artifact. But how do you limit what it gets in there? By the way code is 1 to 1 from the video, I don't do anything else, I am tryin gto have a 100% working example so I can work on my project afterwards.

If you just need the host to decide which MF to show you can use a sort of configuration service. You could use feature flags and do more advanced scenarios like claims based, etc. For the remote, you can use a similar approach.

@@RyanGarant-l5z yes you need it to support top level await

I would probably keep my worker intact and not federate into it. You could federate the worker itself though

@@ozzolim you don’t have to, the federation plug-in takes a url in the config or you can load remotes dynamically

I briefly touch on the topic in this video, but I do have a follow up one coming about Zephyr Cloud ruclips.net/p/PLemTpfu9eAGERzgHBYU_ibWJ_clKpTWfI&si=GHEm_YCW9zeWMGXn

You can configure sharing either at runtime or build time. I would likely do it at build time

@@matrixhasyou979 those errors are usually issues with sharing react, make sure you have the bootstrap file setup on the host, and both set to share react and react-dom

@@russellcanfield thx, for you answer. I have tried to as you suggested. But it still does not work. I have added into init (Host) shared deps (react, react-dom, react-redux, react-router-dom): init({ name: "host", remotes: [], shared: { react: { shareConfig: { eager: false, singleton: true, requiredVersion: "18.3.1", }, ........ }, and also I have added the same shared into remote app. Remote app totally independent app with it's own redux and router and I expose all app. But still face with an error like this: - Uncaught TypeError: Cannot read properties of null (reading 'useMemo') - React Router caught the following error during render TypeError: Cannot read properties of null (reading 'useMemo') Maybe I missed something?

I think the repo still has it, minor updates in terms of a plugin or dynamic remote loading

Thanks for pointing that out! You could probably wrap it in a useMemo, or put the component in state for extra optimization

@@tafsianvickey you should be able to use routes as normal and either approach should work.

@@russellcanfield thanks for replying...i tried.. currently using hashrouter.. did useNavigate('/assisted/gridwall') from another mfe currently route /digital/plan but i get an error in console regarding react router-dom and all routes are handled from a host mfe which routes to root of assisted mfe and digital mfe

@@Guruboggarapu-w2b you can use similar code or a generic import statement, you don’t have to put the result in a React component. A component is just a JavaScript function basically. But I would think through why you’d need the saga in the shell. Components should be self contained as much as possible and state sharing limited

@@russellcanfieldI have a shell app and bunch of remote apps connected from shell using module federation. When link corresponding to remote app clicked trying to inject all corresponding reducers and sagas into shell store before loading remote components. Please let me know if you think of any better solution. Thanks.

@@Guruboggarapu-w2b the modules can’t have their state directly? Do they need to put state in the shell?

It should be sharing react-query as a singleton but the double QueryProviders may be to blame. By default react-query creates a react context, so if you create 2 query providers it might be creating two context providers

@@russellcanfield thank bro ❤❤. I have solved it now but there is a big problem that I have tried to search but still have not found a solution. If on the dev environment everything is fine but when I build to the production environment, there is a situation when I directly enter the url of a router with a remote to an MFE, the error is 404 The requested path could not be found, but if I click on the Link with the same path, the MFE can be loaded but reloading the page gives an error 404 The requested path could not be found, when I reload, in the Sources section of the dev tool there is no remote loaded. Can you give me some advice? Thank you

@@tranvansi6302 in dev you are probably hitting a URL fallback in webpack dev server, forget the setting name. But in production you may need a redirect back to your index.html so that react router can intercept and apply the routing rules. There are a few articles online with like nginx to setup for a SPA

@@russellcanfield Can you give me some resources or keywords to solve this problem. Thank you.

@@tranvansi6302 Sure, try this if you are using nginx dev.to/paulmojicatech/nginx-and-angular-spa-redirect-11ji

I would let the host handle the majority of the work, login, token renewal, etc. and remotes should just have access to the tokens/general auth state. Few ways to share the state, but you don’t want multiple consumers trying to perform refreshes

@@russellcanfield If I separate an auth MFE, is there any problem? In my case, I will manage the app host and the members will work on a separate MFE. If there is an MFE that needs authentication, I can remote to the auth MFE, but is there any problem?. Thank bro ❤❤❤❤❤❤

@@tranvansi6302 you probably could, I’ve used packages for it usually and shared them as singleton. But it could be a MFE I suppose, you’d just need to be careful controlling versions

@@russellcanfield Thanks for the great answer

So you'll have to decide what that MFE needs. In some cases maybe the MFE is a "page" of an application that lives under the host. It could share the same layout as the host. Maybe it needs a special layout, you could own that in the MFE or have the host own it. Really depends on the requirements. The MFE should try to own as much as it can so there is little friction and dependencies upstream

@@russellcanfield In my case, I have a fixed layout with a sidebar that contains two links: "users" and "products". When clicking on "users", it should load the corresponding remote MFE for users, and when clicking on "products", it should do the same for products. Should I let the MFE manage the layout, or should the host manage it?.Thank bro ❤❤❤❤

@@tranvansi6302 I'd let the host determine that, routes rarely change

@@russellcanfield thank bro ❤❤

Thanks! So you probably want to avoid dockerizing a react app, I would say put them in Azure Storage under separate folders inside a Container and drop a CDN infront of it. It's likely cheaper and easier to deploy; plus no vulnerabilities in docker images and managing NGINX inside of the image to serve the static content. Then deciding which remote to load involves either "hard coding" them at build time in the host. Or use a dynamic loader which allows you to make HTTP calls and pass in user information or hit some configuration service to retrieve the URL, then pass that down into federation. If it's v2 federation, you can call registerRemote with the URL, then loadRemote after :)

@@russellcanfield - not sure how to do that. BTW It's an Angular 18 application.

Are you sharing React and React DOM? Make sure it’s wrapped in a suspense on the host application

Yes you can, check out the official examples

You definitely can have routes in the child, mainly you need to be careful about route conflicts and ensure you share a singleton of react router with similar versions. It really depends on the complexity of the applications and what makes sense. But in some cases, owning routes can leech requirements down into the child modules

@@russellcanfield agree 👍 thanks again

Thanks!

This is an older version, here is a newer video which I believe is v19 Micro frontends - NX, Rspack, Module Federation with new Federated Types! ruclips.net/video/oJY92rZV8NE/видео.html

Thanks!

Sorry what do you mean by runtime type? Types are only available in your IDE. Bi-directional should work fine, there were early versions in MFv1 where the types plugin would stall if it had to resolve type but that is resolved

@@russellcanfield loading modular config at run time like in bootstrap? Is it good/ bad to have all MFE's work as both host and remote? Will it affect the performance?

yeah, im facing this situation right now, but what if my mfe has more than one page or has to manipulate the url params, it will not work

@@moristar maybe introduce some sort of simple state, that when it registers it will update and trigger a re-render

​@@russellcanfield I almost gave up until I realized that my two widgets have the same name in the rspack config :) It seems that if the modules have the same name where they were defined it will still work on the consumer side, but only for the first assignment and after that it will be stuck on the first remote no matter what. Here is the sample code for the module consumer. import './App.css'; import { lazy, useState, Suspense } from 'react'; import { loadRemote, registerRemotes } from '@module-federation/enhanced/runtime' const App = () => { const [CurrentWidget, setCurrentWidget] = useState(() => null); const [port, setCurrentPort] = useState(() => 3001); registerRemotes([ { name: "widgets", entry: "localhost:3000/mf-manifest.json" }, { name: "widgets_new", entry: "localhost:3001/mf-manifest.json" } ]); const reloadWidget = async () => { if (port === 3000) setCurrentPort(() => port + 1); else setCurrentPort(() => port - 1); const widgetName = 'widgets'+ (port === 3001 ? '_new' : '') + '/button'; console.log('Port: ' + port + '. Reloading from: ' + widgetName); setCurrentWidget(() => lazy(() => loadRemote(widgetName))); console.log(CurrentWidget); } return ( <div className="content"> <h1>Rsbuild with React</h1> <p>Start building amazing things with Rsbuild.</p> <button onClick={reloadWidget}>Reload</button> <div> <Suspense fallback={<div>Loading...</div>}> {CurrentWidget && <CurrentWidget />} </Suspense> </div> </div> ); }; export default App;

Sure thing!

Is react router shared as a singleton? You may need to make sure you are working on the same object reference

@russellcanfield Yes, the react router and react-router-dom are shared as singletons. And I don't have the routes redeclared in the remote app because I expect it to use the routes in the parent but it's still not working unfortunately. And it is also using the same routing history object reference that is declared in the host

Glad it was helpful!

Thanks! The videos to me always feel long but I try to walk through doing the work. I appreciate it.

@@russellcanfield IMO the module federation videos are primarily for us senior devs and slower pace is good for us.