Skip to content

[🐞] useDocumentHead returns a non-serializable value which cannot be tracked directly #7339

Closed
@ianlet

Description

@ianlet

Which component is affected?

Qwik City (routing)

Describe the bug

When using the useDocumentHead hook to access head data (e.g. values added in the frontmatter in MDX files), we cannot directly track the head value for changes:

export default component$(() => {
  const head = useDocumentHead();

  const authorId = useComputed$(() => {
    return head.meta.find((m) => m.name === "author")?.content; // <--- ESLint not happy
  });

  // ...
});
  51:12  error  When referencing "head" inside a different scope (useComputed$), Qwik needs to serialize the value, however "head.styles.props.ref" is a function, which is not serializable.
Check out https://qwik.dev/docs/advanced/dollar/ for more details  qwik/valid-lexical-scope

✖ 1 problem (1 error, 0 warnings)

It is however possible to bypass this by simply destructuring useDocumentHead() return value directly:

export default component$(() => {
  const { meta, frontmatter } = useDocumentHead();

  const authorId = useComputed$(() => {
    return meta.find((m) => m.name === "author")?.content; // <--- ESLint happy
  });

  // ...
});

Reproduction

https://github.com/ianlet/qwik-head-scope-issues

Steps to reproduce

No response

System Info

System:
    OS: Linux 6.13 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Memory: 3.23 GB / 15.37 GB
    Container: Yes
    Shell: 3.7.1 - /usr/bin/fish
  Binaries:
    Node: 21.6.2 - ~/.asdf/installs/nodejs/21.6.2/bin/node
    Yarn: 1.22.19 - ~/.asdf/shims/yarn
    npm: 10.2.4 - ~/.asdf/installs/nodejs/21.6.2/bin/npm
    pnpm: 9.11.0 - ~/.asdf/installs/pnpm/9.11.0/bin/pnpm
  Browsers:
    Chromium: 133.0.6943.53
  npmPackages:
    @qwik.dev/core: 2.0.0-alpha.6 => 2.0.0-alpha.6
    @qwik.dev/router: 2.0.0-alpha.6 => 2.0.0-alpha.6
    typescript: 5.4.5 => 5.4.5
    undici: * => 7.3.0
    vite: 5.3.5 => 5.3.5

Additional Information

No response

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions