StyleStore: Breaking change in 1.29.10 destroys styles in MFE scenario

[tzimmermann]

Describe the bug

When upgrading @ui5/webcomponents-react from 1.29.9 -> 1.29.10 we noticed broken styles.
It seems that FlexBox component styles (maybe others as well) are removed, which leads to components flowing beneath each other instead of next to each other, breaking the whole layout.

The observed behaviour is very similar to #6193

As the only relevant change in that new version seems to be this one, I suspect it is causing this: #6319

Isolated Example

No response

Reproduction steps

See the attached video for the full repro sequence:

1. Set up a host application with @ui5/[email protected] that contains an MFE on an earlier version, like 1.29.8. Make sure that the MFE uses scoping, and do not configure the UI5 dependency as shared. Both apps should use separate UI5 instances.
2. Select the tab "Metrics", which loads the MFE.
3. Switch back to another tab "Dashboards", which unmounts the MFE.
4. Observe that some styles are missing (like FlexBox's), which lead to a broken layout.

Expected Behaviour

I expect to be able to use different versions of ui5/webcomponents-react in the MFE and the host application without styles being removed that are still in use.

Screenshots or Videos

Screen.Recording.2024-09-13.at.16.07.32.mp4

UI5 Web Components for React Version

1.29.10

UI5 Web Components Version

1.24.9

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

SAP Signavio

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @tzimmermann

it turns out, that this bug is related to the change from React JSS to CSS modules in v1.28.0. In that version, we tried to optimize the bundle size by only adding the used CSS classes. Unfortunately, this had an unintended effect on MFEs, resulting in the behavior you're describing.

We've fixed this in the v1.29.10 release. However, if you're using a version between 1.28.0 and 1.29.9, the issue still exists, as those versions don’t apply scoping. Therefore, component styles from all applications are removed if a component (like the FlexBox) is no longer used by an MFE.

To summarize:

• All versions below 1.28.0 should work as intended.
• Versions 1.28.0 - 1.29.9 are broken in MFE scenarios.

Would it work for you to update all MFEs using the affected versions to v1.29.10?

Apologies for the inconvenience!

[tzimmermann]

Thanks Lukas for the detailed explanations.
Let me rephrase once more to make sure I got it right:

1. Host 1.29.9, MFEs 1.28.0-1.29.9: Working
2. Host 1.29.10, MFEs 1.28.0-1.29.9: Broken
3. Host 1.29.10, MFEs 1.29.10: Working again

• To get from 1. to 3., we should
  • update the MFEs first one by one to 1.29.10. Is there any risk that we get missing styles here as well, as long as not all other MFEs and the host have upgraded to 1.29.10?
  • finally upgrade the host to 1.29.10

We have quite a lot of MFEs (around 10) owned by different teams and it's quite some synchronisation overhead, that's why I want to make sure I got it right.
You also don't see any other non-breaking way to do the upgrade, by any chance?

[Lukas742]

Hi @tzimmermann

after further investigation, it turns out that we need another fix. We're currently working with the highest priority on this topic and will hopefully be able to provide a new version in the upcoming days. I will update the issue accordingly.

Currently, MFEs will break if a version >= 1.28.0 is used.
To be more specific, if a MFE with a version >=1.28.0 is removed and no other MFE is using the exact same version, all component styles of the used components are removed.

[Lukas742]

v1.29.11 is now finally supporting MFEs again.

I would recommend upgrading all MFEs using version 1.28.0 - 1.29.10 to version 1.29.11, as otherwise you could unfortunately still occur missing styles if one of the MFEs with the unsupported version is removed.

@tzimmermann If you're still facing issues after updating, please let us know.