Source code for this article is available on GitHub.
In this article
In this article
Introduction
What is a Micro Frontend?
Module Fed...
For further actions, you may consider blocking this person and/or reporting abuse
Since Module Federation is a webpack thing, and since Vite does not use webpack, wouldn't the introduction of webpack negate the building speed of Vite? After all, I cannot possibly imagine that this works by compiling with Vite (rollup). I can only imagine that at least part of the building process is done by webpack.
Doesn't this mean that doing Vite with Module Federation is kind of a contradiction? Are we not mixing things that shouldn't be mixed? Aren't we losing rollup's build and going back to slower builds with webpack?
please check dependencies, there is no webpack involved
Isn't Module Federation a webpack feature? I'm confused if not.
it's a common misconception, module federation is just a principle to share code around on runtime.
Wow, this is an eye-opener. I'll read about it.
Module federation is a concept. Yes it was originally added to the webpack first but the original author was working on porting this to different build/pack libraries like vite.
You'll be able to find information under issues for each more vite/roll-up
I don't think this article is relevant anymore. Shared packages create multiple instances, other plugins fail to produce a digestible remote, etc.
Still doable but much more involved.
As I see it, vite.js is generally moving away from microfrontends and I can't blame them a single bit.
Module federation suddenly stopped working in Chrome(129) when I tried to run locally, But it was working with Chrome version 128, now i am testing locally on Firefox, any idea why latest release of chrome do not support it, when we run locally?
My vite.config.ts as below:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";
export default defineConfig({
plugins: [
react(),
federation({
name: "pokemonHome",
remotes: {
pokemon: "localhost:5174/assets/remoteEntry.js",
},
shared: ["react", "react-dom"],
}),
],
server: {
host: true
},
build: {
modulePreload: false,
target: "esnext",
minify: false,
cssCodeSplit: false,
},
});
Cors error in host-app, could you please help ?
Can you help me with the exact issue or any screenshots? I have uploaded the entire working on github so please do check that once and see if it's of any help.
CORS policy error is there with your github repo as well, enclosed screenshot, please check
localhost/:1 Access to script at 'localhost:3000/assets/remoteEntry.js' from origin 'localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
remoteEntry.js:1 Failed to load resource: net::ERR_FAILED
localhost/:1 Uncaught TypeError: Failed to fetch dynamically imported module: localhost:3000/assets/remoteEntry.js
Thanks for the update, I have edited the blog to reflect the changes and code is also updated on github.
The issue was how the remote app was being served, instead of
npx serve dist, we can usenpm run preview. This will serve the app on port4173instead of3000, so you would need to edit thevite.config.jsfile inhost-appto reflect this.These changes are updated on the blog post, let me know if that helps.
Happy Coding!! 🚀
For each of the remote Apps, are the "shared" libraries always loaded from the host app, or how does that work, which app provides the shared libraries?
Also any pointers on which things to implement when making a module federation setup like this production ready?
Thanks! great read btw. clear and simple to understand!
Yes, you are right. The "shared" libraries are always loaded from the host app. Few examples are
react,react-dom,react-router-dom. These libraries need to be shared because if we have multiple variants in host and remote app, it will cause errors. If you find any libraries with this issue, you can include them in the "shared" libraries in host and remote apps.Happy coding!! 🚀
Great article, thank you for sharing but I have concerns when using with typescript. Does this import "import List from "todo_components/List";" work without warning or errors in IDE?
I am working on this now with typescript and the IDE does throw an error. I am sure there is a way to configure it to work, just need to figure out how....
So in my case, i just needed to add a
declarations.d.tsfile to the root of my src with:declare module 'yourRemotePath' {const RemoteApp: any;
export default RemoteApp;
}
Great article, but i hate module federation with vite in react hot refresh doesn't support. Module federation with webpack you can see your changes in second your shell / container app.
This is a problem that is most likely resolved if your host app is itself a Vite + React project. However, I haven't tested much. It is the lack of "preamble" that kills HMR, and I think the preamble comes with a host name. So I guess, in a micro-frontend world, that one preamble per React MiFe is needed.
It is a complex matter. I once tried to get the attention of Vite about it, but I was shot down.
Good read as a beginner I was able to understand micro-frontends after reading this blog but I have encountered a bug on the inputs.You should check on that
Thank you for taking the time to read the blog post and for your feedback! I'm glad to hear that you found the post helpful in understanding micro-frontends.
I'm sorry to hear that you encountered a bug with the inputs. To better assist you and potentially address the issue, could you please provide more details about the bug you encountered? With more information, I'll do my best to assist you in resolving the issue.
It doesn’t render the newTodos in the UI rather it prints object.object on the input
Thanks for pointing that out, I have modified the article to fix the issue. Happy Coding 🚀