[webcomponents-compat]: Theme [sap_fiori_3] not registered for package [@ui5/webcomponents-compat]

[henriquemattos]

Bug Description

When migrating to v2.0.1, I'm getting this console.error:

❌ Theme [sap_fiori_3] not registered for package [@ui5/webcomponents-compat]

Since I'm using the "old" ui5-table heavily and dynamically and migrating to the new table might not be an easy task, therefore I'm experimenting with this new package, but it seems the sap_fiori_3 theme is not registered.

I've checked the sources and the theme is available in the CSS directory of the package.

For my main application/modules, I'm using:

import {setTheme} from '@ui5/webcomponents-base/dist/config/Theme'
import {setLanguage} from '@ui5/webcomponents-base/dist/config/Language'

setTheme('sap_fiori_3').then(() => {
  const htmlLanguageAttribute = document.documentElement.lang
  setLanguage(htmlLanguageAttribute);
});

Affected Component

ui5-table webcomponents-compat

Expected Behaviour

I would expect that the webcomponents-compat respects/inherits from the main dist, otherwise it would have a Theme.js to define it similarly to the main dist.

Isolated Example

No response

Steps to Reproduce

1. Add import '@ui5/webcomponents-compat/dist/Table' and related modules TableGroupRow, TableCell, ...
2. Set the theme to sap_fiori_3
3. Check the error in the console ...

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

2.0.1

Browser

Chrome, Edge, Firefox, Safari

Operating System

macOS

Additional Context

No response

Organization

SAP Event Ticketing

Declaration

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

[ilhan007]

Hi @henriquemattos

Since Morning Horizon is the default theme, sap_fiori_3 (and all the rest) is considered additional theming asset that should be explicitly requested/imported and since it's a another package probably you need to import "@ui5/webcomponents-compat/dist/Assets.js"; to import the compact package theming assets, similar if you using a component from the fiori package you need to import "@ui5/webcomponents-fiori/dist/Assets.js";

[henriquemattos]

Hi, @ilhan007 . Thank you very much for the quick and accurate answer. You are right, adding the assets silenced console's error.

I leave here for reference:

import '@ui5/webcomponents/dist/Assets'
import '@ui5/webcomponents-compat/dist/Assets'
import '@ui5/webcomponents-fiori/dist/Assets'
import '@ui5/webcomponents-icons/dist/Assets'