Questions tagged [webpack-module-federation]
The webpack-module-federation tag has no usage guidance.
webpack-module-federation
589
questions
0
votes
0
answers
6
views
Use hash in remote module URL for webpack module federated components
I have a app that loads some module federated components. For example:
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'app',
remotes: {
remoteComponent1:'...
- 355
0
votes
0
answers
17
views
Unable to invoke a dialog component via MFE
I need to load a remote module for an angular based app. The remote module is also angular based and part of another FE. Here is the code I'm using:
loadRemoteModule({
remoteEntry: 'https://...
- 531
0
votes
0
answers
24
views
Module federation: Unsatisfied version 18.3.1 from `REMOTE-REPO-C` of shared singleton module react (required ^17.0.1)
I am using module federation for micro-frontends, where the host is react:^17 and some of the remote repos also have react:^17.
I want to upgrade all the repos to ^18 in a step by step manner with one ...
- 266
0
votes
0
answers
26
views
Module Federation not workng with react host app and vite-react remote app
I have setup the module federation using two remote apps into one host application. My host app is react and one the remote is also created using react, while the second remote app is created using ...
1
vote
0
answers
17
views
How to bootstrap the routing, NgRx etc of MFE module from the shell project forcibly using module federation?
I want to bootstrap or initiate the MFE's routing, NgRx and other library instances from the Shell project programatically.
Now I am doing lazy load of modules from shell as below
loadChildren: () =&...
- 7,380
0
votes
0
answers
37
views
How to extract a component from dynamically loaded angular remote module
How to extract the Component from module federation remote module
At present I am having the below code
Remote code:
exposes: {
'./TodoModule': './src/todo/todo.module.ts',
'./...
- 7,380
1
vote
0
answers
48
views
Utilize react component over URLs dyanamically
I have a React component say TEST.TSX , I have compiled the .tsx file to .js and uploaded it to GitHub, so that I can server it over JsDelivr. Can I use the CDN in another react app to utilize the ...
0
votes
0
answers
16
views
Angular microfront end w/ tailwindcss
i use module federation and multirepo in angular, i have a shell, an app (MFE) and a shared-ui
so in my shared-ui i have installed tailwindcss, i have my file tailwind.config.js and a styles.scss ...
- 1
0
votes
0
answers
25
views
Error when switching between Angular micro frontends in a project using Module Federation
I am facing an issue with my microfrontend architecture project where I use Module Federation. My project structure is:
Shell (React)
Microfrontend 1 (Next.js)
Microfrontend 2 (Angular)
Microfrontend ...
- 1
0
votes
0
answers
29
views
Module not found: Error: Can't resolve 'provider_app/App' remote React modules
I'm trying to access React components from a consumer in a remote link. I'm using Module federation in Webpack 5 for this. Here's my code.
Provider App
App.js
import React from 'react'
function App() ...
- 1
0
votes
0
answers
34
views
How to expose a React component from host application to a module federated child application in Micro Front End Architecture?
I was exploring the Microfront End Architecture, and I found this very useful github repo https://github.com/nebarf/module-federation-react-router-dom
My usecase is I want to expose a component from ...
0
votes
1
answer
123
views
Css variables of Primevue styles are not defined in module federation layout app
I try to use feature of customization of the primevue theme and change the prefix for css variables of Primevue style. After checking the changes in layout MF app I unfortunately see that all this ...
0
votes
0
answers
40
views
Use TraslateService in standalone components accross Angular microfrontends and Webpack Module Federation
Which is the best way to use the TraslateService (ngx-translate) accross microfrontends in an Angualar application with Webpack Module Federation using standalone components?
I was importing ...
- 335
0
votes
0
answers
21
views
Shared dependencies are still generated in both remote and shell app in @angular-architects/module-federation
Both shell app and remote app has angular_core package in the build bundle, even after adding them in shared: {} webpack config. Is it expected?
Shell app webpack config
'@angular/core': {
...
0
votes
0
answers
23
views
Micro frontend - Material UI library duplicate imports webpack
I am implementing the microfrontend architecture, My main app and mf1 app uses material ui,
the material ui library are imported multiple times, even after specifying the singleton property.
which is ...
0
votes
1
answer
32
views
Cannot load multiple modules and components from an Angular microapp
I'm trying to load an Angular remote component in another shell application, but I get:
TypeError: Cannot read properties of undefined (reading 'get') and TypeError: Cannot read properties of ...
- 98
0
votes
1
answer
63
views
Uncaught Error: Shared module is not available for eager consumption in Module Federation with React and Storybook
I'm using Module Federation with React and Storybook and encountering an issue. The page loads correctly initially, but upon refresh, I receive the following error:
Error Image Preview
Input.jsx:
...
- 3
0
votes
0
answers
46
views
Getting Error when routing to remote module nested component from shell in angular 17 micro frontend using module federation
im using module federation for angular micro front end with angular V17 projects. im exposing routes from remote module.
for initial routing it is working good, but i have 2 buttons in remote module ...
- 19
0
votes
0
answers
53
views
Angular Module federation - how to import and use a shared module from another mf-project
I am using module federation for microfrontends, and in each microfrontend I use atomic architecture. I have a module called atoms that contains and exports many components. I want to use these ...
1
vote
0
answers
24
views
Webpack: Module "./..." does not exist in container after deploying to AWS
I have a React micro frontend application using Webpack's Module Federation and I am not able to figure out this error after I deploy the MFEs up to a higher environment in AWS. The apps run fine if I ...
- 31
0
votes
1
answer
36
views
Material-Table is not displayed in the host React app
I'm trying to implementing Module Federation for my web app. I'm using React Vite. I tried to call <IdentificationCard /> component inside remote app from host app but it didn't showed up.
I use ...
- 19
1
vote
1
answer
158
views
Load remote React component in runtime
I could not find an good enough answer so I'm creating a new question with the details of what I'm trying to archive.
I have a React Component that will be embedded in other pages.
This React ...
- 1,474
0
votes
0
answers
30
views
Angular Modular Federation with base-href for remote module in shell
I've 2 remote apps app1and app2 and a shell app myapp, since all the applications will be behind a proxy, each app is distinguished by base-href i.e, /app1,/app2 and /myapp respectively. From app1 ...
- 9,924
0
votes
0
answers
37
views
remote application child route not working - Angular
in microfrontend - i am exposing one module suppose m1 and this m1 have 5 route it's working fine while i am running this child application individually but after integrate as microsite in shell ...
1
vote
0
answers
60
views
TypeError: dispatcher is null
I'm having some issues, but the main one seems to be the TypeError: dispatcher is null. It appears after several rebuilds of the code. Additionally, in the browser console, I see the warning: Invalid ...
0
votes
0
answers
67
views
NX Module Federation: ng-zorro-antd library not shared between host and remote apps
I am working on an NX monorepo setup with Module Federation, and I'm facing an issue with sharing the ng-zorro-antd library between my host and remote applications. Despite configuring the library as ...
- 23
1
vote
0
answers
74
views
Use Vite as remote app in Webpack 5 dynamic remotes container
I'm trying to migrate my remote app from Webpack 5 to Vite.js and I am stuck at loading dynamically remotes by the host that works with Webpack 5.
The remote app exposes an entry point file with Vite ...
- 31
0
votes
0
answers
52
views
how can I achieve css isolation in my module federation app?
I have React module federation app.
I load several remote components, which are being developed by other development teams in the company.
lately, we've ran into an issue where the css of the remote ...
- 31
0
votes
0
answers
30
views
I frame or module federation is more preferable to setup different applications in one portal through NEXTJS14
I have different small relates application developed by different languages and I want to collect through one portal. I used Nextjs 14 as a host so which one prefer Module Federation, or I frame ...
- 1
0
votes
0
answers
42
views
Module Federation: Remote app crashes the host app
So I have a remote app that is being consumed in the host app. I'm importing the Button component from the remote and lazy loading in the host app. The problem is that the remote app crashes the host ...
0
votes
0
answers
24
views
Is it possible to expose component from parent to child in micro-frontend using ModuleFederationPlugin
The structure of my react based application is micro-frontend using webpack ModuleFederationPlugin.
I am only exposing component from child and using it as remote in parent application.
I want to ...
- 93
0
votes
0
answers
27
views
Webpack Alias Not Resolving Import
i want to integrate something from another repo using webpack 5 module federation.... but i have an issue where it isnt resolving alias.
my config is like the following:
module.exports = {
...
...
- 1,936
0
votes
0
answers
84
views
Is bidirectional module federation possible between a webpack project and a vite project?
I'm investigating webpack's module federation and the potential for allowing separate teams to choose their own frameworks and still share UI elements on one website. I have set up a number of ...
- 380
0
votes
0
answers
32
views
Module Federation between Nx Monorepo Reactjs and Normal Reactjs (CRA)
I'm researching how to expose a component in an NX React app (the remote) so it can be consumed by a standard React app (the host) which is not part of the NX module. I've read the NX documentation ...
- 13
0
votes
0
answers
13
views
Webpack Federation Errors when implment iFrom one React Vite to another?
i have this Error when implment Table Data to another React App with same versioning in remote and host using module federation
Code or Remote
const { merge } = require('webpack-merge');
const ...
- 83
0
votes
0
answers
13
views
Title: How to Skip Loading Duplicate CSS Files in Nimbus Bundle Loader?
I am currently facing an issue where my app, loaded in the Nimbus Bundle Loader, is loading two CSS files (main.css and chunk.css) with the same content. I want to find a solution to skip loading one ...
0
votes
0
answers
28
views
How to change chunk load url?
I'm using two Next.js applications and employing webpack to set up module federation for configuring micro-frontends. At the host, I successfully load remoteEntry.js, but when loading related modules, ...
- 1
0
votes
0
answers
101
views
Angular and Module Federation Navigating From One Remote to Another 'TypeError: Cannot read properties of undefined (reading 'call')'
Using Angular 17.3.4, nx 18.2.4, and Module Federation.
From the Host's home page I am able to navigate to RemoteA. From the home page I am also able to navigate to RemoteB. However, when I try to ...
4
votes
0
answers
148
views
Prevent module name from being minified in webpack bundle
I have a host application that consumes a remote package through a script tag.
My remote package includes the following ModuleFederationPlugin config within the webpack config
plugins: [
new webpack....
- 49k
3
votes
2
answers
447
views
React app in Vue using webpack5 Module federation
I've created simple react App HelloComponent and try to insert into Vue application but i'm unsuccessful
// React webpack config
const { ModuleFederationPlugin } = require('webpack').container;
const {...
- 123
0
votes
0
answers
57
views
Trying to expose the whole appmodule of the mfe, but also at the same time trying to expose a specific component of that mfe, in angular
Trying to expose the whole appmodule of the mfe, but also at the same time trying to expose a specific component of that mfe, in angular. is this even possible? i have read the modulefederation ...
0
votes
0
answers
88
views
Multiple instances of Microfrontend
I'm curious about something and would like to hear some opinions. Imagine I'm working on a microfrontend architecture using Angular. In this setup, I have a shell and a remote (like a card). Let's say ...
- 13
0
votes
1
answer
73
views
React Component gets rerendered
I have a React wrapper component which gets re-rendered. This is actually related to a wrapper for a microfrontend.
How can I find out what causes it to suddenly re-render even though the control is ...
- 50.3k
0
votes
0
answers
29
views
Handle package versioning between remote application in NX monorepo workspace
I'm working in NX monorepo workspace with different remote applications, My shell application is using angular 17 dependency from root package.json. I have a requirement to create new remote ...
0
votes
0
answers
68
views
Complex column sorting in tanstack table (Solid) issues
In a Solid JS app, I am attempting to utilize the Sort feature of a Tanstack Table (V8). I'm also using Webpack5 and Module Federation, if that could potentially cause an issue.
I have a column that ...
- 39
0
votes
0
answers
48
views
How to copy compiled tailwind styles to separate static file in next.js?
I'm trying to host a copy of tailwind compiled styles that are usually inlined to page's tag to a separate file for microfrontend import in module federation. My tailwind styles are in src/shared/...
- 688
0
votes
0
answers
40
views
How do I communicate between hosted components in a micro frontend system?
I have 2 microfront ends, one hosts component for interacting with a file system (call this MFE_docs), the other interacts with a user record system (call this MFE_recs).
In MFE_docs I am exposing a ...
- 3,478
1
vote
0
answers
57
views
Unable to import federated module into another project
I'm attempting to use Module Federation to share a module from one project (remote app) to another project (host app).
In my remote app, the module is compiled successfully, and I can see the ...
- 11
0
votes
0
answers
86
views
Webpack Module Execution Error: TypeError: Cannot read properties of undefined (reading 'call')
I have an Angular app that acts as the host and imports a React/Nest.js component using Module Federation. I'm encountering the following error
Error loading or rendering the React component: ...
- 11
0
votes
0
answers
263
views
Native federation - Angular 17
I am working with micro frontends using native federation in Angular 17. I have encountered the issue that the 'app-loading-bar' component is not displayed in the shell, as I have instantiated it in ...
