Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ianlet opened this issue Feb 14, 2025 · 1 comment · May be fixed by #7366
Open

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

ianlet opened this issue Feb 14, 2025 · 1 comment · May be fixed by #7366
Assignees
Labels
STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working

Comments

@ianlet
Copy link
Contributor

ianlet commented Feb 14, 2025

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

@ianlet ianlet added STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working labels Feb 14, 2025
@JerryWu1234 JerryWu1234 self-assigned this Feb 18, 2025
@JerryWu1234
Copy link
Contributor

because of qwik eslint plugin, I'll working on it right now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants