Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[🐞] Production build hoists a nested `.map()` handler's captures out of both loops, so SSR fails

Open
  • Is something wrong?
#9,190 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
25/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
rust, typescript
Domain
compilers

Research direction

Start from the Qwik Optimizer (Rust) loop-handler capture path that commit 42323eb8f changed, which the reporter says handles only one loop level. Reproduce with the linked repo's production build, then check the compiled server output for w([facet,e]) hoisted to component scope. Done when a two-level nested .map() handler captures bindings inside the correct loop scope and the SSR page renders the checkboxes.

Written by the indexing model from the issue text.

Description

Which component is affected?

Qwik Optimizer (rust)

Describe the bug

A handler inside a nested .map() that captures a variable from each loop works in dev. In a production build its capture array is created at component scope, before either loop runs. facet isn't defined there, so SSR throws and the page is replaced by the 500 error page (served with HTTP 200, nothing logged).

{props.facets.map((facet) => (
  <div key={facet.slug}>
    {facet.items.map((item) => (
      <label key={item.slug}>
        <input type="checkbox" onChange$={() => props.toggle$(facet.slug, item.slug)} />

Compiled server output:

c.s(e=>{let t=s.w([facet,e]);return a(`div`,null,null,e.facets.map(e=>a(`div`,null,null,e.items.map(n=> ...
Reproduction

https://stackblitz.com/github/tuurbo/qwik-rc-nested-loop-capture-repro https://github.com/tuurbo/qwik-rc-nested-loop-capture-repro

Steps to reproduce
  1. pnpm install && pnpm preview (production build; pnpm dev renders fine)
  2. Open the preview URL. It shows "500 Internal Server Error" instead of the checkboxes.
  3. grep -o "w(\[facet[^)]*)" server/build/*.js prints w([facet,e]).
System Info
OS: Windows 11
Node: 26.10.0
pnpm: 12.9.1
@qwik.dev/core: 2.0.0-rc.2
@qwik.dev/router: 2.0.0-rc.2
vite: 8.3.3
Additional Information

Possibly from 42323eb8f "fix(ts-optimizer): put loop-handler .w() bindings in component scope" (first in 2.0.0-beta.45). Its loop-cross-capture path seems to handle one loop level, and with two the binding lands outside both.

Workaround: pass the loop values through data-* and read them from the element:

<input
  type="checkbox"
  data-facet={facet.slug}
  data-item={item.slug}
  onChange$={(_, el) => props.toggle$(el.dataset.facet!, el.dataset.item!)}
/>
Dominant language
TypeScript
Stars
22.1k
Forks
1.4k
Avg merge
1d 14h
Merged PRs (30d)
108

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from QwikDev/qwik

All issues in QwikDev/qwik

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.