search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
437 stars 97 forks source link

StyleStore: Breaking change in 1.29.10 destroys styles in MFE scenario #6348

Open tzimmermann opened 1 week ago

tzimmermann commented 1 week ago

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 https://github.com/SAP/ui5-webcomponents-react/issues/6193

As the only relevant change in that new version seems to be this one, I suspect it is causing this: https://github.com/SAP/ui5-webcomponents-react/pull/6319

Isolated Example

No response

Reproduction steps

See the attached video for the full repro sequence:

  1. Set up a host application with @ui5/webcomponents-react@1.29.9 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

https://github.com/user-attachments/assets/13281fc1-6ac7-44dc-9cf2-e8f641e5117c

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

Lukas742 commented 11 hours ago

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:

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

Apologies for the inconvenience!