Vite building issue when importing components from "@ui5/webcomponents-react/wrappers"

[lance315]

Recently, we encountered an issue in our project: it works well locally, but after deploying to CF, the footer element of Page appears at the top rather than the bottom.
We imported the components in this manner:
import { Page, Title, UI5WCSlotsNode } from "@ui5/webcomponents-react/wrappers";

The problem was that the Page and Title weren't built into the JS files in the dist folder. After altering the import to:
import { Page, Title } from "@ui5/webcomponents-react";
everything worked as expected.

I would like to understand why this happened and what the recommended way to import the components is.

[Lukas742]

Hi @lance315

the wrappers folder bundles all ui5 web components without their respective import, so app developers can handle importing the component themselves. This was implemented a while ago for a very specific use-case and is therefore not documented.
Please only use the documented root import (e.g. import { Button } from '@ui5/webcomponents-react';)

[lance315]

Hi @Lukas742 ,
Thank you for your reply.
Could you please clarify what is meant by the wrappers folder bundles all UI5 web components without their respective import? I have noticed that the content of index.js is the same in both the dist and wrappers folder. How should I understand the phrase without their respective import?

[Lukas742]

In the wrappers folder all web components ((...)/wrappers/webComponents/[componentName]/index.js) come without the import for the respective web component, whereas in the dist folder all web components ((...)/dist/webComponents/[componentName]/index.js) are imported.

Take the Avatar for example:

• In the dist folder, there's an import statement in line 3, which is importing the Avatar: https://unpkg.com/browse/@ui5/webcomponents-react@2.1.0/dist/webComponents/Avatar/index.js
• In the wrappers folder, this import is missing: https://unpkg.com/browse/@ui5/webcomponents-react@2.1.0/wrappers/webComponents/Avatar/index.js

When you're importing from root (e.g. import {Avatar} from "@ui5/webcomponents-react") you will consume the components from the dist folder.

[lance315]

Thanks for the detailed explanation. Now I see.