Skip to content

[🐞] rendering of qwik container on the client leads to an unresponsive ui #7757

@sashkashishka

Description

@sashkashishka

Which component is affected?

Qwik Runtime

Describe the bug

I have a host qwik-city application and the container qwik app. I wanna embed on the client side a qwik container to the host, but receive an unexpected behaviour.

Here is how things work with the host and the container:

  1. user opens page
  2. start of rendering host application
  3. host application comes across the qwik-container and sends request to its ssr server
  4. fetch qwik-container HTML and embed it to the host
  5. send to the user combined HTML with host and container UI and scripts

And it works fine, until we have an MPA. With SPA this approach can be used the same way, but clientside:

  1. user navigates to the other page
  2. we start rendering in the browser container by making a request to its ssr server
  3. receive full container's HTML and embed it to the host

At this moment, things get weird. Here is the behaviour of qwik v1 (pay attention to the timer after rendering it on the client):

https://www.youtube.com/watch?v=TL5Ghr7loaQSo

  1. while the increment button works fine, the timer doesn't start at all

expected behaviour is:

  • timer works the same way as on initial page load

With qwik v2 beta it doesn't work at all:

https://www.youtube.com/watch?v=7k51yyrAilE

  1. the ssr-ed content doesn't unmount
  2. the client side embedded container's HTML is unresponsive

expected behaviour is:

  • ssr-ed content unmounts when the component shouldn't be shown by code logic
  • timer works the same way as on initial page load
  • counter works the same way as on initial page load

Reproduction

https://github.com/sashkashishka/qwik-containers

Steps to reproduce

  1. Clone repo
  2. Checkout main branch for qwik v1 and main-v2 for v2
  3. Use node v22 and pnpm v10
  4. Install deps in each dir (host, widget-counter) separately by running “pnpm i”
  5. Run in each dir the command “pnpm run showcase” and leave them running
  6. Open localhost:4444 for v1 and locahost:5555 for v2

System Info

System:
    OS: macOS 15.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 85.06 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - ~/.asdf/installs/nodejs/22.11.0/bin/node
    Yarn: 1.22.22 - ~/.asdf/installs/nodejs/22.11.0/bin/yarn
    npm: 10.9.0 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 10.6.4 - ~/.asdf/installs/nodejs/22.11.0/bin/pnpm
  Browsers:
    Chrome: 138.0.7204.158
    Safari: 18.5
  npmPackages:
    @builder.io/qwik: ^1.14.1 => 1.14.1
    @builder.io/qwik-city: ^1.14.1 => 1.14.1
    typescript: 5.4.5 => 5.4.5
    undici: * => 7.12.0
    vite: 5.3.5 => 5.3.5

Additional Information

No response

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions