Closed
Description
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