Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

`useHead` does not resolve reactive input on the client

Abierto
  • ¿Algo no está bien?
#1,004 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
74/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Tranquilo
Stack tecnológico
nuxtjs, typescript
Área
frontend, web-dev

Línea de trabajo

Comienza en src/runtime/composables/head.ts inspeccionando cada sitio activo de activeHead.push() y patch() junto con el comportamiento de clientUseHead de @unhead/vue y su resolución basada en watchEffect. Usa la reproducción enlazada para verificar que las props reactivas se resuelvan en el cliente, se actualicen cuando cambien sus refs y ya no impidan que las etiquetas head lleguen al DOM.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
457
Forks
53
Merge medio
15 h 54 min
PR fusionados (30 d)
25

Preparar el entorno

Aún no hemos revisado los archivos de configuración de este proyecto. Empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de nuxt-modules/ionic

Todos los issues de nuxt-modules/ionic

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.