nuxt: `useHead` does not inject styles in concurrent pre-rendering

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

About this issue

Original URL
State: closed
Created 10 months ago
Comments: 16 (10 by maintainers)

Commits related to this issue

fix: downgrade nuxt to 3.5 due to nuxt/nuxt#22763 — committed to retejs/retejs.org by Ni55aN 10 months ago

Most upvoted comments

@harlan-zw https://github.com/nuxt/nuxt/issues/23074

Ni55aN on Sep 7, 2023

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 on Aug 29, 2023