Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

`useHead` does not resolve reactive input on the client

未关闭
  • 哪里不对？
#1,004 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
74/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
冷清
技术栈
nuxtjs, typescript
领域
frontend, web-dev

调研方向

从 src/runtime/composables/head.ts 开始，结合检查 @unhead/vue 的 clientUseHead 行为及其基于 watchEffect 的解析，检查每个 activeHead.push() 和 patch() 的活动位置。使用链接的复现来验证 reactive props 会在客户端解析、在其 refs 发生变化时更新，并且不再阻止 head 标签进入 DOM。

由索引模型根据 Issue 内容生成。

描述

bug
🐛 The bug

The module's useHead replacement (src/runtime/composables/head.ts) never resolves reactive input. All of its activeHead.push() / patch() sites hand the raw object to unhead, while @unhead/vue's own clientUseHead runs walkResolver(input, VueResolver) inside a watchEffect.

This only bites on the client: @unhead/vue/server creates the head with propResolvers: [VueResolver], so refs resolve inside unhead during SSR. The client head has no prop resolver, so resolution exists only in the composable this module replaces.

Two consequences:

  1. Crash — a ref on innerHTML/textContent of a style/script reaches unhead's normalizeProps, which JSON-stringifies object values:

    TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'ComputedRefImpl'
    |     property 'dep' -> object with constructor 'Dep'
    --- property 'computed' closes the circle
    at JSON.stringify (<anonymous>)
    at normalizeProps (unhead.js:148:28)
    at normalizeTag (unhead.js:175:15)
    at normalizeEntryToTags (unhead.js:209:56)
    at resolveTags (unhead.js:362:16)
    at _renderDOMHead (unhead.js:183:21)

    It is thrown inside the debounced _renderDOMHead, so the whole head render is abandoned: the tag never lands in the DOM, and it can abort router start.

  2. Silent, for every other prop: the ref object is used instead of its .value, and since there is no watchEffect, the tag never updates when the ref changes. Client-side reactive head does not work, though unhead v3 documents it as supported.

@nuxt/ui triggers case 1 out of the box: its colors plugin calls useHead({ style: [{ innerHTML: root, id: 'nuxt-ui-colors' }] }) where root is a computed. Any @nuxtjs/ionic + @nuxt/ui app loses its theme colors style. @nuxtjs/i18n's useLocaleHead() and @nuxtjs/seo hit case 2.

🛠️ To reproduce

https://github.com/Carpediem94/nuxt-ionic-head-repro

🌈 Expected behaviour

Reactive input resolved before being pushed to unhead, and kept in sync as it changes, matching the behaviour of @unhead/vue's useHead.

ℹ️ Additional context

@nuxtjs/ionic 1.0.2, nuxt 4.5.2, @unhead/vue 3.3.1, @nuxt/ui 4.10.0.

Same error class as https://github.com/unjs/unhead/issues/869, but that fix only covered the SSR streaming serializer.

主要语言
TypeScript
星标
457
派生
53
平均合并
15 小时 54 分钟
30 天内合并 PR
25

环境准备

我们还没有检查这个项目的环境配置文件。先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

nuxt-modules/ionic 的其他 Issue

查看 nuxt-modules/ionic 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。