Questions tagged [webpack-module-federation]

No instructions have been provided for utilizing this tag just yet!

An issue has been encountered in the following module federation: `TypeError: g.useSyncExternalStore is not a function`

I encountered an error after deploying my next app with module federation: TypeError: g.useSyncExternalStore is not a function The same app works fine as a standalone application when run with yarn dev or yarn start, but it fails when using module federat ...

Bringing in External Components/Functions using Webpack Module Federation

Currently, we are experimenting with the react webpack module federation for a proof of concept project. However, we have encountered an error when utilizing tsx files instead of js files as shown in the examples provided by the module federation team. We ...

Error encountered in Webpack 5 module federation when attempting to dynamically load a remote module and a

I am attempting to transform a large monolithic React application into micro-frontends using webpack module federation. The remote module has already been deployed and is functioning flawlessly when the dev server is running locally. However, upon running ...

Exploring the power of Angular Module Federation in leveraging remote services

I am breaking down an Angular application into multiple microfrontends. One of these microfrontends manages the shopping cart, and it includes a service for storing added products. The main shell microfrontend needs to access this service to display the nu ...

NextJS Facing a Challenge with Webpack Module Federation in React Implementation

I need to run a react app within a NextJS host app as well as on its own. After reviewing the NextJS example at https://github.com/module-federation/module-federation-examples/tree/master/nextjs-react, I came across some important notes: NOTE: Omitting v ...

Resolving Discrepancies in Microfrontend Styling

Hey there, I'm currently dealing with a Microfrontend application that utilizes the Material UI dependency internally (both at the Host and Child MFE). I've encountered a CSS conflict problem that arises when the styles are loaded in a specific ...

Is it feasible for a React-based shell to host or load an Angular component using Module Federation in Webpack 5?

I am currently developing a web application using Angular that will be embedded or loaded from another web application built with React. I am unsure if this integration can be achieved using webpack 5's module federation. Module federation involves loadin ...

Configure webpack to source the JavaScript file locally instead of fetching it through HTTP

Using webpack.config.js to fetch remote js for Module Federation. plugins: [ new ModuleFederationPlugin({ remotes: { 'mfe1': "mfe1@http://xxxxxxxxxx.com/remoteEntry.js" } }) ], Is it possible to incorporate a local JS file in t ...

Mixing Module Federation with different React versions and individual CSS isolation

In my setup, the module federation remote repository is: developed using react 17 utilizing material-ui 4 with jss incorporating global CSS from third-party libraries that cannot be modified Meanwhile, I have several hosts that consist of: different ver ...

Finding the file path to a module in a NextJS application has proven to be a challenge when utilizing the module

Currently, I am utilizing the webpack plugin module-federation/nextjs-mf, which enables us to work with a micro-frontend architecture. Based on the official documentation and referencing this particular example, it is possible to share components between ...

Collaborating on data through module federation

Currently, I am in the process of developing a Vue.js and TypeScript application using Vite. In addition, I am utilizing the vite-module-federation-plugin for sharing code across different applications. My main inquiry revolves around whether it is possibl ...

Utilizing Angular routing with Module Federation

I am currently involved in a module federation project. mfe1: ParentApp mfe2: childApp1 mfe3: childApp2 mfe4: childApp3(parent of ChildApp1) Each of the child applications, including childApp1, childApp2, and childApp3, have their own routing modules tha ...

Next.js presents a challenge with micro frontend routing

In the process of developing a micro frontend framework, I have three Next.js projects - app1, app2, and base. The role of app1 and app2 is as remote applications while base serves as the host application. Configuration for app1 in next.config.js: const ...

Host app is failing to render shared components in SSR

Encountering an issue while implementing SSR with module federation? Check out my code example Steps to Begin: Run yarn install:all command Execute yarn shell:server:build task Start the server using yarn shell:server:start Initiate remote services with y ...