qwikifiers / qwikifiers/qwik-ui

[🐞] Accordion w/ useLocation on Qwik UI site

Open
#930 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

STATUS-1: needs triage TYPE: bug
Dominant language
TypeScript
Stars
695
Forks
142
PR merge metrics
No merged PRs in 30d

Description

Which package is affected?

Headless Kit

Describe the bug
import { component$ } from '@builder.io/qwik';
import { useLocation } from '@builder.io/qwik-city';
import { Accordion } from '@qwik-ui/headless';
export const DocsNavigation = component$(() => {
  const location = useLocation();

  return (
    <Accordion.Root>
      <Accordion.Item>
        <Accordion.Trigger>trigger</Accordion.Trigger>
        <Accordion.Content>
          <ul class="flex flex-col gap-2">
            {Array.from({ length: 5 }).map(() => {
              const isLinkActive = location.url.pathname;
              return <></>;
            })}
          </ul>
        </Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  );
});

When using the above instead of what's currently in navigation-docs.tsx, we run into the following error:

10:46:02 PM [vite] Internal server error: Code(27): Missing Object ID for captured object
      at createAndLogError (/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:110:52)
      at logErrorAndStop (/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:61:15)
      at qError (/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:287:10)
      at mustGetObjId (/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:5540:15)
      at mapJoin (/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:5690:16)
      at Module._pauseFromContexts (/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:5643:23)
      at beforeClose (/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/@builder.io/qwik/dist/server.mjs:520:30)
      at /Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:1274:20
      at /Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:1728:24
      at async renderRoot$1 (/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:1273:3)
/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/@builder.io/qwik/dist/core.mjs:116
    throw err;
    ^

Error: Code(27): Missing Object ID for captured object
    at createAndLogError (/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:110:52)
    at logErrorAndStop (/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:61:15)
    at qError (/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:287:10)
    at mustGetObjId (/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:5540:15)
    at mapJoin (/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:5690:16)
    at Module._pauseFromContexts (/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:5643:23)
    at beforeClose (/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/@builder.io/qwik/dist/server.mjs:520:30)
    at /Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:1274:20
    at /Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:1728:24
    at async renderRoot$1 (/Users/jackshelton/dev/open-source/qwik-ui/node_modules/.pnpm/@builder.io+qwik@1.7.3_@types+node@20.12.12_sass@1.77.4_terser@5.31.1/node_modules/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:1273:3)

Node.js v20.12.2

This seems to happen specifically on the qwik ui site, when the boolean is inside the first map, useLocation is used, and is inside the Accordion Content.

Reproduction

above

Steps to reproduce

I was unable to reproduce in an empty app, but directly in the Qwik UI site:

  1. copy the above code
  2. paste it into navigation-docs.tsx
  3. run pnpm dev
  4. navigate to the browser
System Info
System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M3
    Memory: 202.36 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - /usr/local/bin/node
    npm: 10.5.0 - /usr/local/bin/npm
    pnpm: 9.5.0 - /usr/local/bin/pnpm
    bun: 1.1.7 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 125.1.66.118
    Chrome: 127.0.6533.120
    Safari: 17.5
  npmPackages:
    @builder.io/qwik: 1.7.3 => 1.7.3 
    @builder.io/qwik-city: 1.7.3 => 1.7.3 
    typescript: 5.4.5 => 5.4.5 
    undici: 5.28.4 => 5.28.4 
    vite: 5.2.11 => 5.2.11
Additional Information

No response

Contributor guide

Open the contributing guide

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.

Research direction

Start with the Qwik UI site's navigation-docs.tsx and reproduce the issue by running pnpm dev, then placing the reported useLocation and map inside Accordion.Content. Investigate the Qwik 1.7.3 rendering error and verify that the navigation renders without the “Missing Object ID for captured object” failure.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.