[ManagedStyles.js]: Cannot use 'import.meta' outside a module

[gnseo]

Bug Description

When I was trying to make an isolated example, got an unexpected error.

And I can't make the example what I tried.
Could you have a look at the following example?

Affected Component

No response

Expected Behaviour

No response

Isolated Example

https://stackblitz.com/edit/js-wm5vexwm?file=package.json,index.html,index.js,tsconfig.json

Steps to Reproduce

...

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.24.0

Browser

Chrome

Operating System

MacOS

Additional Context

No response

Organization

No response

Declaration

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

[kgogov]

Hi @gnseo, thanks for the isolated example — I looked into it.

This isn't a bug in UI5 Web Components. import.meta is valid ESM and your code is correct. The error comes from your StackBlitz project running on the legacy Turbo engine (note the /turbo_modules/... path in the error and the *.stackblitz.io preview), which evaluates module source in a non-module context and therefore can't handle import.meta.url — used by @ui5/webcomponents-base in Runtimes.js. The reported location ManagedStyles.js:4 is a mis-attribution; the actual import.meta sits in a transitively-imported module.

Fix: run it in a real bundler (Vite / WebContainers) instead of the classic JS project. I reproduced your exact files — index.js, index.html, style.css, unchanged — in a Vite project and everything renders with no error:
👉 https://stackblitz.com/edit/c1yabarn-k2enza1p

To set it up yourself:

1. Create a Vite project — on StackBlitz open https://stackblitz.com/fork/vite, or locally run npm create vite@latest my-app -- --template vanilla.
2. npm install @ui5/webcomponents
3. Keep your imports and markup exactly as they are:

   import '@ui5/webcomponents/dist/Button.js';
   // ...Avatar / Link / Label the same way

This matches our official First Steps guide, which uses Vite. No config workarounds needed.

Regards,
Konstantin Gogov

[gnseo]

Hi, @kgogov .

Thank you for your reply.
I had forked from the sample link of "new issue" page.
In the sample link provided, the version of current package was "2.18.0" and the sample project was working before I updated to "2.24.0".

So, could you update the sample link in "new issue" page?
I think someone will meet this error message too and make them confused.

Regards.

[kgogov]

@ilhan007 heads-up on our bug-report template's StackBlitz starter (bug_report.yml L31 → js-vsrpnb).

Root cause: that starter runs on StackBlitz's legacy Turbo engine (*.stackblitz.io), which evaluates modules in a non-module context and can't handle import.meta. It only works today because it's pinned to 2.18.0 — but import.meta.url was added to Runtimes.js in v2.21.0 (#13235), so the moment anyone bumps the version, it breaks with:

Cannot use 'import.meta' outside a module
  in @ui5/webcomponents-base/dist/ManagedStyles.js

That's what caused this issue. I reproduced it directly: forked the starter, bumped only 2.18.0 → 2.24.0, same crash. The same code on a Vite/WebContainers project works fine — so it's the engine, not our code.

Suggested update: move the starter to a Vite/WebContainers project. I've prepared one with the exact demo, unchanged, on ^2.24.0:
👉 https://stackblitz.com/edit/fmpohs6z-dy3vgwuy

If it looks good to you, we can repoint the template link to it so future reporters don't hit this.