Which component is affected?
Qwik Runtime
Describe the bug
Using the result of a useAsync$ call in an element's style does not resolve correctly and instead sets the element's style-attribute to [object Object].
Using the value in another way (e.g., console.log), causes the component to render correctly.
Passing the value through some child-components and only using it as a style does not work, however.
Example
export default component$(() => {
const color = useAsync$<string>(
() => new Promise((resolve) => setTimeout(() => resolve("red"), 1000)),
);
// Logging the color's value causes the component to be rendered in red
// console.log(color.value);
return <div style={{ color: color.value }}>I should be red</div>;
});
Reproduction
https://github.com/FloezeTv/qwik-useAsync-style
Steps to reproduce
- Create new Qwik v2 project (
npm create qwik@2.0.0-beta.32)
- Create a component that uses the result of
useAsync$ in an element's style
- Check the component's
style
System Info
System:
OS: Linux 6.12 Manjaro Linux
CPU: (16) x64 AMD Ryzen 7 5700U with Radeon Graphics
Memory: 9.19 GB / 38.58 GB
Container: Yes
Shell: 5.9 - /bin/zsh
Binaries:
Node: 25.8.1 - /usr/bin/node
npm: 11.11.1 - /usr/bin/npm
pnpm: 10.32.1 - /usr/bin/pnpm
bun: 1.3.11 - /usr/bin/bun
Deno: 2.7.5 - /usr/bin/deno
Browsers:
Firefox: 150.0
Firefox Developer Edition: 150.0
npmPackages:
@qwik.dev/core: ^2.0.0-beta.32 => 2.0.0-beta.32
@qwik.dev/router: ^2.0.0-beta.32 => 2.0.0-beta.32
typescript: 5.9.3 => 5.9.3
vite: 7.3.1 => 7.3.1
Additional Information
No response
Which component is affected?
Qwik Runtime
Describe the bug
Using the result of a
useAsync$call in an element'sstyledoes not resolve correctly and instead sets the element'sstyle-attribute to[object Object].Using the value in another way (e.g.,
console.log), causes the component to render correctly.Passing the value through some child-components and only using it as a
styledoes not work, however.Example
Reproduction
https://github.com/FloezeTv/qwik-useAsync-style
Steps to reproduce
npm create qwik@2.0.0-beta.32)useAsync$in an element'sstylestyleSystem Info
System: OS: Linux 6.12 Manjaro Linux CPU: (16) x64 AMD Ryzen 7 5700U with Radeon Graphics Memory: 9.19 GB / 38.58 GB Container: Yes Shell: 5.9 - /bin/zsh Binaries: Node: 25.8.1 - /usr/bin/node npm: 11.11.1 - /usr/bin/npm pnpm: 10.32.1 - /usr/bin/pnpm bun: 1.3.11 - /usr/bin/bun Deno: 2.7.5 - /usr/bin/deno Browsers: Firefox: 150.0 Firefox Developer Edition: 150.0 npmPackages: @qwik.dev/core: ^2.0.0-beta.32 => 2.0.0-beta.32 @qwik.dev/router: ^2.0.0-beta.32 => 2.0.0-beta.32 typescript: 5.9.3 => 5.9.3 vite: 7.3.1 => 7.3.1Additional Information
No response