useHead does not inject styles in concurrent pre-rendering

[Atinux]

Environment

---

• Operating System: Darwin
• Node Version: v18.12.1
• Nuxt Version: 3.6.5
• Nitro Version: 2.6.0
• Package Manager: pnpm@8.6.12
• Builder: vite
• User Config: devtools, nitro
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-4ah2ty?file=app.vue,nuxt.config.ts

Describe the bug

We found an issue with useHead used in a plugin and using nuxt generate.

Download the Stackblitz because they don't have the grep command.

First, run npm run generate, it should generate 100 pages.

Running:

grep -RHl '__nuxt' dist/page/ | wc

Shows:

     100     100    2390

Then run:

grep -RHl 'header-height' dist/page/ | wc

Returns:

      69      69    1725

Happy to take a look at it @harlan-zw, seems related directly to unhead.

Additional context

If I set the concurrency to 1, it works perfectly:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      concurrency: 1,
    }
  }
})

But as you know this is not the best case.

Logs

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-4ah2ty (Open reproduction)

[harlan-zw]

Possibly related to context, this may be a work-around if that's the case. Will test it properly tomorrow.

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.runWithContext(() => {
    useHead({
      style: [
        {
          innerHTML: ':root { --header-height: 5em; }',
          tagPriority: -2,
          id: 'nuxt-usehead-concurrency-bug',
        },
      ],
    });
  })
});

[harlan-zw]

Workaround

  const head = nuxtApp.vueApp._context.provides.usehead
  head.push({
    style: [
      {
        innerHTML: ':root { --header-height: 5em; }',
        tagPriority: -2,
        id: 'nuxt-usehead-concurrency-bug',
      },
    ],
  })

In Nuxt 3.7.we can also access the head from the ssrContext which is slightly nicer (for server plugins).

export default defineNuxtPlugin((nuxtApp) => {
  const head = nuxtApp.ssrContext!.head
  head.push({
    style: [
      {
        innerHTML: ':root { --header-height: 5em; }',
        tagPriority: -2,
        id: 'nuxt-usehead-concurrency-bug',
      },
    ],
  })
});

[harlan-zw]

Seems to be an issue with the useHead context being unsynced with the nuxt app head instance.

This would stem from an initial flaw in how I set up the global context for SSR, currently, there's a single export of activeHead. Instead, we should either provide an unctx context or a way to register a function that resolves the context.

Dropping activeHead is planned for v2, but we should be able to find a non-breaking opt-in before then.

I'm not sure what the best solution so any ideas would be helpful.

[harlan-zw]

Maybe related nuxt-modules/turnstile#271

[Atinux]

The workaround works @harlan-zw

Thank you for your fast investigation ❤️

[harlan-zw]

This is now seems to be fixed in Unhead 1.4.0 without any workarounds.

[Ni55aN]

useSeoMeta doesn't work for me since 3.7.0, but worked correctly in 3.3.1

unhead is v1.4.1

[harlan-zw]

Can you provide some reproduction details @Ni55aN

[Ni55aN]

@harlan-zw

https://github.com/retejs/retejs.org/tree/nuxt-use-head-issue

after npm run generate the html files inside /.output/public/examples have messy meta tags. For example, twitter:image should end with filename other than main.png and be related to html page

If I downgrade nuxt to 3.5, it works correctly

[harlan-zw]

@harlan-zw

retejs/retejs.org@nuxt-use-head-issue

after npm run generate the html files inside /.output/public/examples have messy meta tags. For example, twitter:image should end with filename other than main.png and be related to html page

If I downgrade nuxt to 3.5, it works correctly

Can you provide some actual code? I can't see what you mean, it looks like the examples don't have meta tags?

I'd recommend upgrading using npx nuxi upgrade --force

[Ni55aN]

@harlan-zw it has latest nuxt version 3.7.0, right?

it looks like the examples don't have meta tags

they have, but these tags are mixed up between different examples (in .output/public)

npx nuxi upgrade --force doesn't help. After my npm run generate I received .output/public/examples/chatbot/index.html without meta tags at all. At the same time .output/public/examples/allmatter/index.html has wrong meta tags from different example.

If I downgrade nuxt to 3.5, the resulting .output has correct files

[harlan-zw]

@harlan-zw it has latest nuxt version 3.7.0, right?

it looks like the examples don't have meta tags

they have, but these tags are mixed up between different examples (in .output/public)

npx nuxi upgrade --force doesn't help. After my npm run generate I received .output/public/examples/chatbot/index.html without meta tags at all. At the same time .output/public/examples/allmatter/index.html has wrong meta tags from different example.

If I downgrade nuxt to 3.5, the resulting .output has correct files

Please try out 3.7.1 🙏

[Ni55aN]

@harlan-zw unfortunately after updating to 3.7.1 the generate command throws 500 for some pages. How to debug such an errors on generate? These pages do not throw any error on dev or build (+ node ./index.mjs)

I found a possible reason of the error (using useSeoMeta in one of the components), but I can't figure out what exactly Error it throws, because if I comment it like /*useSeoMeta*/({ title, ... it works, so the exception is not TypeError

UPD: An error is thrown when useSeoMeta is called after await useAsyncData, while it works correctly in 3.5

https://github.com/retejs/retejs.org/blob/49893d05658e08fbe48dbb21a68a45ab0b98bf64/components/RenderContent.vue#L39

[harlan-zw]

Would it be possible to make a separate issue @Ni55aN? It seems unrelated to the original

[Ni55aN]

@harlan-zw #23074