Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

`useHead` does not resolve reactive input on the client

Đang mở
  • Có gì không ổn?
#1,004 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
74/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
nuxtjs, typescript
Lĩnh vực
frontend, web-dev

Hướng nghiên cứu

Bắt đầu trong src/runtime/composables/head.ts, kiểm tra từng vị trí active của activeHead.push() và patch() cùng với hành vi clientUseHead của @unhead/vue và cơ chế phân giải dựa trên watchEffect của nó. Sử dụng reproduction được liên kết để xác minh rằng các props reactive được phân giải trên client, cập nhật khi các refs của chúng thay đổi và không còn ngăn các thẻ head được đưa vào DOM.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
457
Fork
53
Merge trung bình
15 giờ 54 phút
Pull request đã merge (30 ngày)
25

Chuẩn bị môi trường

Chúng tôi chưa kiểm tra các tệp thiết lập môi trường của dự án này. Hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của nuxt-modules/ionic

Tất cả issue của nuxt-modules/ionic

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.