fix(Assets): remove top-level await (#7741)

Top-level await for `@ui5/webcomponents-fiori/dist/Assets.js`, causes
runtime errors in Next.js App Router and could also break Pages Router
during SSR or build-time module evaluation.

Author: Lukas742

README.md

@@ -118,6 +118,24 @@ npm install @ui5/webcomponents-react @ui5/webcomponents
 > import { Button } from '@ui5/webcomponents-react';
 > ```
 
+#### Importing Assets
+
+The default assets import (`import '@ui5/webcomponents-react/dist/Assets.js';`) includes assets from the fiori package. Due to a limitation of Next.js (top-level await is not supported), we can't dynamically import the assets based on the installed packages.
+If you are using the minimal installation, please import the assets manually as follows:
+
+```ts
+import '@ui5/webcomponents/dist/Assets.js';
+import '@ui5/webcomponents-react/dist/json-imports/i18n.js';
+
+//fetch
+import '@ui5/webcomponents/dist/Assets-fetch.js';
+import '@ui5/webcomponents-react/dist/json-imports/i18n-fetch.js';
+
+//node
+import '@ui5/webcomponents/dist/Assets-node.js';
+import '@ui5/webcomponents-react/dist/json-imports/i18n-node.js';
+```
+
 ## End of Support for Version 1.x
 
 The support for version 1.x of `ui5-webcomponents-react` has ended on **July 1, 2025**. We recommend migrating to version 2.x as soon as possible. For more information, please refer to our [Migration Guide](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/migration-guide--docs).

docs/Welcome.mdx

@@ -68,12 +68,48 @@ Since version `v2.14.0` of `@ui5/webcomponents-react`, `@ui5/webcomponents-fiori
 - You want to use the [VariantManagement](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/inputs-variantmanagement--docs) component.
 - You import anything from the `@ui5/webcomponents-fiori` package.
 
-**Note:** Most popular bundlers enable tree-shaking for production builds, so there’s no difference in the final bundle size between the recommended and minimal installations.
-
 ```sh
 npm install @ui5/webcomponents-react @ui5/webcomponents
 ```
 
+**Note:** Most popular bundlers enable tree-shaking for production builds, so there’s no difference in the final bundle size between the recommended and minimal installations.
+
+> ⚠️ **Warning**
+>
+> If your bundler does **not** support tree-shaking, you must use **subpath imports**.
+>
+> Otherwise, since `@ui5/webcomponents-react` re-exports all components, **every component** (including those that depend on the `@ui5/webcomponents-fiori` package) will be included in your bundle, which will lead to errors due to the missing module.
+>
+> **✅ Do:**
+>
+> ```tsx
+> import { Button } from '@ui5/webcomponents-react/Button';
+> ```
+>
+> **❌ Don’t:**
+>
+> ```tsx
+> import { Button } from '@ui5/webcomponents-react';
+> ```
+
+##### Importing Assets
+
+The default assets import (`import '@ui5/webcomponents-react/dist/Assets.js';`) includes assets from the fiori package. Due to a limitation of Next.js (top-level await is not supported), we can't dynamically import the assets based on the installed packages.
+If you are using the minimal installation, please import the assets manually as follows:
+
+```ts
+import '@ui5/webcomponents/dist/Assets.js';
+import '@ui5/webcomponents-react/dist/json-imports/i18n.js';
+
+//fetch
+import '@ui5/webcomponents/dist/Assets-fetch.js';
+import '@ui5/webcomponents-react/dist/json-imports/i18n-fetch.js';
+
+//node
+import '@ui5/webcomponents/dist/Assets-node.js';
+import '@ui5/webcomponents-react/dist/json-imports/i18n-node.js';
+```
+
 ### Version Alignment & Package Mapping
 
 <VersionTable />

packages/main/scripts/generateI18n.mjs

@@ -58,6 +58,8 @@ spawnSync('npx', ['prettier', '--write', path.resolve(SRC_I18N_PROPERTIES, 'i18n
 // generate Assets.js and Assets-fetch.js
 const jsonImports = await readdir(TARGET_I18N_JSON_IMPORTS);
 
+// todo: Next.js does not support top level await
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function createDynamicFioriAssetsImport(suffix) {
   return `try {
   await import('@ui5/webcomponents-fiori/dist/Assets${suffix}.js');
@@ -66,9 +68,13 @@ function createDynamicFioriAssetsImport(suffix) {
 }`;
 }
 
-const assets = [`import '@ui5/webcomponents/dist/Assets.js';`, createDynamicFioriAssetsImport('')];
-const assetsFetch = [`import '@ui5/webcomponents/dist/Assets-fetch.js';`, createDynamicFioriAssetsImport('-fetch')];
-const assetsNode = [`import '@ui5/webcomponents/dist/Assets-node.js';`, createDynamicFioriAssetsImport('-node')];
+function createFioriAssetsImport(suffix) {
+  return `import '@ui5/webcomponents-fiori/dist/Assets${suffix}.js';`;
+}
+
+const assets = [`import '@ui5/webcomponents/dist/Assets.js';`, createFioriAssetsImport('')];
+const assetsFetch = [`import '@ui5/webcomponents/dist/Assets-fetch.js';`, createFioriAssetsImport('-fetch')];
+const assetsNode = [`import '@ui5/webcomponents/dist/Assets-node.js';`, createFioriAssetsImport('-node')];
 
 for (const file of jsonImports) {
   if (file.includes('-fetch')) {