React/Solid-JS Module Federation on TanStack!

Microfrontends on TanStack using React and Solid and sharing state with @tanstack/store? You bet! Let's dig into it.

👉 VS Code theme and font? Night Wolf [black] and BitstromWera Nerd Font Mono
👉 Terminal Theme and font? oh-my-posh with custom prompt and BitstromWera Nerd Font Mono

00:00 Introduction
00:15 Creating The Host React App
01:57 Sharing Code From Solid-JS
03:37 Integrating Solid MFE Into React
05:30 Sharing MFE State
08:34 Module Federation Runtime Sharing
09:28 Outroduction

[CodeByNumbers]

That was a really great pace, full of information from start to finish.

[rimzzlabs]

love how you always clarify that "this not for that, but its fun"

[alex-vukov]

It's important to dispose of the Solid app you injected in the div on return from the useEffect. You can use the dispose function returned by render(). Otherwise unmount lifecycle methods in the remote app will not trigger when you navigate to another route in the host react app. This will probably also fix the StrictMode double render issue.

[yasinkavakliat]

Dang, my planned migration from Next.js to TanStack Start just got a lot easier. Thanks for the idea of using module federation Jack. I think this will be the best migration path.

[JLarky]

Jack is finally returning to his roots 😂

[fabriciodorneles]

Hey Jack, thanks a lot, your channel is the Best! One advice: The automatic translation of the titles is generating very strange titles, (at least in PT-BR). I think it will be very better if you deactivate this. The majority of programmers know english anyway...

[pmis]

Hi Jack,
I have been watching your videos on module federations for over 5 years now.
Just a quick one: What are the more graceful options, if remote module is unavailable.

[EricHeaton-yr]

Great video! Quick question: what are you using to run / dev each of the apps? I like the single, dedicated window vs Chrome tabs for each

[markus_code]

Thank you for your video! By the way, are there any videos that cover `useHistoryState` and its ability to control state in history? For example, if you make some changes, you can undo or redo state mutations. i remember you cover xState but you suddenly you didn't cove history part in that video.

[Deus-lo-Vuilt]

I really want to learn Tanstack Start in a more complete way, where would you recommend me to start? I was thinking of looking at some of the examples of the templates to see how they integrate it there.

[akosbalint]

Are you sure whether the if is good in that useEffect (at 5:06)? Isn`t missing a negation (or !== null) in the brackets?

[MartinRojas]

Cool, but with the tanstack and micro frontend a great video would be showing if each module was a different page. How would the router handle bringing those together.

[jamesvandeven]

Just started trying this out for myself, is there a limitation with file based routing that prevents mod-fed or does create-tsrouter-app just not have it set up yet?

[dieguitto]

Any chance you could do an example with Nextjs and React-Vite? where Nextjs is the host and React-vite the remote?

[Meligy]

What's involved in this? The whole Tanstack start or just some pieces? Thanks a lot.

[JGBSolutions]

This is really cool. But how useful is this feature in real-world apps?

[heikkisorsa]

Would this also work for Flutter applications that are built for web and integrated to a react application?

[ploskovytskyy]

I'm getting into the micro-frontends topic and I really want to know if single-spa is still a thing or module-federation is some kind of a go-to option nowadays?

[ethanneff]

Sneaky how you did not press the "increment" and "decrement" from the react counter. That data does not sync.

[developer]

Could you do Angular shell with a React / another framework microfrontend?