Support #577
-
Welcome 🙏 Support questions, workaround, and implementation details questions can live here |
Beta Was this translation helpful? Give feedback.
Replies: 71 comments 179 replies
-
@ScriptedAlchemy any guidance around deployment of a large module federated app? I am looking to do exactly what you demonstrated on the shared-routing example with a shell and various feature MFs. When serving it seems that the plug-in manages setting up the n number of servers on ports, but when doing an actual production deployment, what are the best practices and examples here? How do you configure what the different remotes might be served from and are there ways that certain remotes can build and deploy only their changes safely without the shell? Overall amazing work with this and really can’t wait to see more adoption of module federation in the community! |
Beta Was this translation helpful? Give feedback.
-
@ScriptedAlchemy , first up, kudos to the team for the awesome work going on here. I built a test app in TypeScript (React micro-frontends - container, header, landing page, auth page etc.) You can see code and demo here. There are two issues I noticed and wanted to understand possible workarounds for these:
I'm attempting to workaround issue 1 by rendering a different set of microfrontends for the mobile app (albeit this is a sub-optimal approach). I will get back here on my experience with this workaround and how successful/effective the implementation turned out to be.
|
Beta Was this translation helpful? Give feedback.
-
@ScriptedAlchemy, thank you for putting all the hard work on this amazing feature. Currently, I am trying to implement a module federation POC with the shell architecture. I noticed that module federation will disable tree-shaking on shared modules. Because of this , I am wondering is it true that we should only share non tree-shakable libraries only (e.g. react, react-dom but not lodash-es) ? |
Beta Was this translation helpful? Give feedback.
-
any examples about versioning federation? |
Beta Was this translation helpful? Give feedback.
-
Hi @ScriptedAlchemy, @jacob-ebey! remote: host: and const ThemeToggleButton = React.lazy(() => import("mainApp/ThemeToggleButton")); const App = () => ( I would be very grateful if you can help and tell what I am doing wrong. Thanks |
Beta Was this translation helpful? Give feedback.
-
how to handle various environments with the same file name |
Beta Was this translation helpful? Give feedback.
-
Hi guys- @ScriptedAlchemy @jacob-ebey I am using webpack latest version, I am using bi directional MF approach. Only problem I am facing for each env I have to build the bundle seperately as in remote :{ } we are providing absolute path. Lot of discussion is going on finding any hack to provide the remote bundle url at run time not at build time.. Is there any solution for this so that I can use same bundle for all my env and can set remote bundle url dynamically at runtime? One folk suggested this plugin, will it work |
Beta Was this translation helpful? Give feedback.
-
does the module federation plugin provide any hooks? |
Beta Was this translation helpful? Give feedback.
-
I wonder how this one can be loaded the sync way?
|
Beta Was this translation helpful? Give feedback.
-
I'm new to this and still figuring things out. I have module federation working great in my project. My question is around error capturing if a sub app is down. In other words I have shell calling child. In my development environment if I start the child app everything works as expected. But if I stop child app then shell app spins and gives me some errors as expected. My question is how do I handle this. I'm not entirely sure how I can capture the event error of http://localhost:8081/remoteEntry.js (child app) not being available. I just want to be able to display a nice spinner while remote entry is loading and then display an error if the sub app is not available. Any help or suggestions would be appreciated. |
Beta Was this translation helpful? Give feedback.
-
I am currently developing a project respecting a microfrontend architecture using Webpack5 Module Federation and Angular. I am dealing with a somewhat anondin problem. Indeed, all my microfrontends (remote) work perfectly alone but when integrating them into the shell (host). I have an error that appears and shows some bugs on the application. ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. This error comes from Angular Core and especially when there is an integrated Angular Material component. The craziest thing about this problem is that it’s no longer there when I activate the chrome extension "Redux Dev Tools". There’s probably a problem with sharing libraries, but I don’t know where? My various configs of the host and remotes:
Remote 1 :
Remote 2:
|
Beta Was this translation helpful? Give feedback.
-
I am trying to run multi-threaded-ssr, its complaining @module-federation/federated-runtime-plugin@* is not found in the npm registry, is the package json up to date? |
Beta Was this translation helpful? Give feedback.
-
Hey Folks, I wanted to use dynamic federated module loading in a web worker, so I adapted some of the advanced API examples to work in a web workers. Example here in case it helps anyone else. Cheers, |
Beta Was this translation helpful? Give feedback.
-
Has anyone made any progress with exposing components from the new nextJs 13 app directory architecture (which replaces pages)? Currently, when I do this, I get I'm particularly interested in this because in modularises the server side code, rather than at the _app.tsx entry point (which is incompatible with module federation) |
Beta Was this translation helpful? Give feedback.
-
Hi Team- @ScriptedAlchemy / all Developers, I have worked with custom elements previously in angular. Now am trying to use Modular Federation approach to load mfe. I am using different versions in angular for different mfe's. I am using custom element approach in modular federation(https://www.angulararchitects.io/en/aktuelles/multi-framework-and-version-micro-frontends-with-module-federation-your-4-steps-guide/). As a Custom element it will work when we downloaded the build js files in browser and add the "tag or attribute" to dom. "Your help to understand me is highly appreciable" Thanks all for the support. |
Beta Was this translation helpful? Give feedback.
-
Hi @ScriptedAlchemy, team, We have a pretty big application that uses Marionette and Preact 8 with SSR. It has a big codebase, which is bundled by Webpack 4. Let's call it Base Repository. I see it as the following approach:
Will it work with SSR? Is there a simpler solution? The less we touch Base Repository application logic the better. |
Beta Was this translation helpful? Give feedback.
-
@ScriptedAlchemy , is there a way to check what a package version is resolved to? There is a bug that does not happen locally when application is running in dev mode, but happens only when all mfes are deployed. We suspect that this is a specific bug with one of the packages, but we cannot figure out the version of the package x that is used by the mfe in prod mode. |
Beta Was this translation helpful? Give feedback.
-
Hello @ScriptedAlchemy I'm new in Next.js Module Federation, I just came up with issue about exposedPages, in Thanks |
Beta Was this translation helpful? Give feedback.
-
Hello again @ScriptedAlchemy Currently working with nextjs module federations which uses tailwind as styling, in current module tailwind works pretty well but when I export for example page or component via this is my next1 const { NextFederationPlugin } = require("@module-federation/nextjs-mf");
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
domains: ["avatars.githubusercontent.com"],
},
css: {
modules: true,
global: ["./src/styles/global.css"], // Add the path to the styles.css file
},
webpack: (config, options) => {
const { isServer } = options;
config.plugins.push(
new NextFederationPlugin({
name: "next1",
remotes: {
next2: `next2@http://localhost:3001/_next/static/${
isServer ? "ssr" : "chunks"
}/remoteEntry.js`,
},
filename: "static/chunks/remoteEntry.js",
exposes: {
"./footer": "./src/components/Footer/index.tsx",
"./header": "./src/components/Header/index.tsx",
},
shared: {
tailwindcss: {
eager: true,
singleton: true,
},
},
})
);
return config;
},
};
module.exports = nextConfig; if any farther configurations are necessary, mention it and I'll send here Thanks |
Beta Was this translation helpful? Give feedback.
-
I'm wondering if it's generally wise or a bad idea to spread the |
Beta Was this translation helpful? Give feedback.
-
I am creating a POC for a new webstite with react and module federation with webpack. I have the following micro frontends, a shell, a menu and a filter bar, everything works as expected when the shell app put together the rest of apps. I want some guidance on how I can get the bundles generete of each micro frontend and render separetly in the old website app through a html script tag. This is because while I am developing the new site I want to be able to test some components in the old website with real clients. Thanks 🙏 |
Beta Was this translation helpful? Give feedback.
-
Hi @ScriptedAlchemy, Thanks for the great work!. We're thriving with micro frontend because of your contribution. I'm using ModuleFederationPlugin and trying to intercept the chunk request to append query params by using the below function
This function used to be injected via entry option in the webpack config with the same name as we would give in the ModuleFederationPlugin. I have referred your suggestion from this post Module Federation and Custom startup code "The entry point naming trick takes advantage of module and chunk merging. It used to work fine but now this seems broken where the chunk merges incorrectly as it exports the startup code as the exported module. As it is mentioned by you as a dirty workaround, what is the recommended way of doing it ? Do you have any suggestion? |
Beta Was this translation helpful? Give feedback.
-
There is a webpack concept of Components library as container. Do you recommend or have any examples related to this ? |
Beta Was this translation helpful? Give feedback.
-
Hi @ScriptedAlchemy, I've been struggling trying to implement HMR or a least hot reload using this React 18 SRR example using I tried many things from using Could you tell us how we could get at least hot reload or hot module replacement working with React Thank you so much 🙏 |
Beta Was this translation helpful? Give feedback.
-
Hello everyone, I'm trying to build a micro fe project with next 14 project and I'm kinda stuck whether it is possibile or not to create remotes with the standalone build. After build the next files are inside standalone folder (duh?) and yes the remotes are being generated but outside of it, and of course if I try to run my next apps with So my question is, does module federation supports next standalone build? In order to make remotes works, do I also need to consider the Here is the project https://github.com/Staslios/federated-next-monorepo Sorry for the poor knowledge but I am still learning both Next and MF, any help is appreciated even external resources or yt videos, thank you all. |
Beta Was this translation helpful? Give feedback.
any examples about versioning federation?