Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

`useHead` does not resolve reactive input on the client

Ouverte
  • Quelque chose ne va pas ?
#1,004 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
74/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Calme
Stack technique
nuxtjs, typescript
Domaine
frontend, web-dev

Piste de recherche

Commencez dans src/runtime/composables/head.ts en inspectant chaque emplacement actif de activeHead.push() et patch() parallèlement au comportement de clientUseHead de @unhead/vue et à sa résolution basée sur watchEffect. Utilisez la reproduction liée pour vérifier que les props réactives sont résolues côté client, mises à jour lorsque leurs refs changent, et n’empêchent plus les balises head d’atteindre le DOM.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
457
Forks
53
Merge moyen
15 h 54 min
PR mergées (30 j)
25

Préparer son environnement

Nous n'avons pas encore vérifié les fichiers d'installation de ce projet. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de nuxt-modules/ionic

Toutes les issues de nuxt-modules/ionic

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.