Bug Report
Describe the bug
When using Webpack in a micro-frontend (MFE) setup, url() references inside CSS for fonts (e.g. @font-face { src: url(...) }) are incorrectly resolving to the shell MFE's publicPath, instead of the mfe-1 MFE's. Other assets like JS chunks and images imported in JS resolve correctly.
To Reproduce
- Clone this repo: https://github.com/manfredsteyer/module-federation-plugin-example.git
- Create a duplicate of angular.png in assets folder and rename it as angular-2.png
- Reference that image
.bg-angular {
width: 300px;
height: 300px;
background-image: url('../../../assets/angular-2.png');
background-size: cover;
background-position: center;
}
- Build the child and integrate it into a host MFE.
- Load the application in the browser.
- OR apply this changes.patch on the repo and create a duplicate image
Expected behavior
Image should resolve from the child MFE’s asset path (e.g. http://localhost:3000/assets/angular-2.png).
Actual behavior
Image resolve from the host MFE’s asset path (e.g. http://localhost:5000/assets/angular-2.png), resulting in 404s.
I understand this may not be the ideal place to raise the issue, but any guidance or suggestions would be greatly appreciated.
Bug Report
Describe the bug
When using Webpack in a micro-frontend (MFE) setup, url() references inside CSS for fonts (e.g. @font-face { src: url(...) }) are incorrectly resolving to the shell MFE's publicPath, instead of the mfe-1 MFE's. Other assets like JS chunks and images imported in JS resolve correctly.
To Reproduce
Expected behavior
Image should resolve from the child MFE’s asset path (e.g.
http://localhost:3000/assets/angular-2.png).Actual behavior
Image resolve from the host MFE’s asset path (e.g.
http://localhost:5000/assets/angular-2.png), resulting in 404s.I understand this may not be the ideal place to raise the issue, but any guidance or suggestions would be greatly appreciated.