search

qwikifiers / qwik-ui

Qwik's Headless and styled component library
https://qwikui.com
MIT License
632 stars 144 forks source link

[🐞] Accordion w/ useLocation on Qwik UI site #930

Open thejackshelton opened 3 months ago

thejackshelton commented 3 months ago

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

thejackshelton commented 2 months ago

https://discordapp.com/channels/842438759945601056/843151429479956510/1279427644248817685

some info on the error