Issue in loading images/fonts in MFEs

[Vipin-vis]

Describe the bug or question We are having multliple MFEs with their own assets(png|jpe?g|gif|ttf|woff|svg|eot). We are using webpack file-loader to bundle these assets. It was working fine till last Friday. But now these assets are not getting loaded properly. We also tried url-loader, there also we face same issue. As a workaround, we copied all the assets from MFEs into root app.

To Reproduce Add file-loader webpack plugin for the MFEs and build the it. Try to load the app in Root app. The assets (fonts, image etc) will not get loaded

Expected behavior All the assets of MFEs should load in root app properly

Screenshots and/or console output

Additional context As a workaround, we copied all the assets from MFEs into root app.

[frehner]

If it was working, and then suddenly isn't, why do you think single-spa is the cause? Did you update something related to single-spa to cause this to happen?

[Vipin-vis]

Hi @frehner ,

In our architecture, MFEs are normal react apps and in CI/CD pipeline we are converting the apps into SSPA compatible app. That is we will add single spa dependency dynamically during build time. There we will run ``` npx create-single-spa .....

[frehner]

Ok, so this is potentially an issue with create-single-spa then? If so, I'll transfer it to that repo

[Vipin-vis]

Ok, so this is potentially an issue with create-single-spa then? If so, I'll transfer it to that repo

Okay please do it

[joeldenning]

It was working fine till last Friday.

What changed last Friday? Did you upgrade dependencies?

The key concept here is webpack public path. The webpack public path instructs file-loader and url-loader what the base url is to load images and fonts from. You can read more about it at https://webpack.js.org/guides/public-path/#root.

When using webpack-config-single-spa, the public path is set "on the fly" (at runtime) rather than at build-time, via systemjs-webpack-interop.

There are various things that could cause the problem - setting the public path at build time, setting multiple webpack entries, disabling/removing systemjs-webpack-interop, a problem with systemjs-webpack-interop, other code setting the public path incorrectly, using an old version of systemjs or webpack, etc.

If you can provide a demonstration of the issue as a github repo or code sandbox, I can help diagnose it.

[joeldenning]

Here's the code where webpack-config-single-spa sets up systemjs-webpack-interop:

https://github.com/single-spa/create-single-spa/blob/2c2d7611227c07621e6a109030baf219fa7950d5/packages/webpack-config-single-spa/lib/webpack-config-single-spa.js#L105-L108

[Vipin-vis]

Hi @joeldenning ,

Thank you for your reply. The issue has been resolved for now. This might be due any dependency update or something.

As I already mentioned we are adding sspa dependency in run time by running npx create-single-spa in ci/cd which will look for latest dev dependencies everytime.

I shall provide you with the sample code in few days.

[joeldenning]

Closing due to inactivity