Skip to content

[🐞] v2: Using result from useAsync$ in an element's style does not resolve correctly #8577

@FloezeTv

Description

@FloezeTv

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions