Nuxt•7d ago

Project creation useHead infinite recursion

Whenever I create a new project, using nuxt.new, nuxi or create nuxt, on no changes I get a useHead infinite loop with the following error:

500 Maximum call stack size exceeded

at useHead (E:/Proggetti/NUXT/formli/node_modules/nuxt/dist/head/runtime/composables/v3.js:24:46)

500 Maximum call stack size exceeded

at useHead (E:/Proggetti/NUXT/formli/node_modules/nuxt/dist/head/runtime/composables/v3.js:24:46)

and the same function bellow repeatedly. When I look into the path, the line seems to be off

export function useHead(input, options = {}) {
  const head = injectHead(options.nuxt);
  if (head) {
    return headCore(input, { head, ...options });
  } // < This is the problematic line
}

export function useHead(input, options = {}) {
  const head = injectHead(options.nuxt);
  if (head) {
    return headCore(input, { head, ...options });
  } // < This is the problematic line
}

headCore is imported as follows in the same file

import {
  useHead as headCore,
} from "@unhead/vue";

import {
  useHead as headCore,
} from "@unhead/vue";

the path varries, but the error remains the same no matter if I use npm, bun, pnpm. I did not try Deno. Now, I assume this is for my machiene and I will try it on a second one since I found nothing about this anywhere, if it works on my work notebook I'm fine, I will update in the thread, but it would still possibly be relevant/interesting to figure out why This are the creation scripts I tried and came to the same result npm create nuxt@latest,pnpm create nuxt@latest , npx nuxi@latest create <project> or bun create nuxt@latest. I avoided modules or templates, so it's 100% a blank project as for the installed versions: - nuxt : ^3.16.2 - @unhead/vue: 2.0.2 (other libs used 2.0.8 from what I saw - vue: ^3.5.13 - vue-router: ^4.5.0

5 Replies

kapa.ai•7d ago

Hi @fischi20. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing with the infinite recursion in useHead appears to be related to a known problem with Unhead v2, which was recently integrated into Nuxt. Based on the knowledge sources, there have been several issues reported with the upgrade to Unhead v2 in Nuxt 3.16.x. This upgrade was implemented in a pull request (feat(nuxt): upgrade Unhead v2 major) and has caused some compatibility issues for users. The error you're seeing is likely related to the changes in how Unhead handles context in version 2. According to the pull request:

The implicit context implementation would keep a global instance of Unhead available so that you could use Unhead in a non-Vue context. [...] With v2 this is dropped in favour of Nuxt itself re-exporting the composables while resolving the context.

Several GitHub issues have been opened about similar problems: 1. Does not provide export 'resolveScriptKey' - Users reported issues after upgrading from 3.15.4 to 3.16.2 with Unhead exports. 2. useHead() was called without provide context - This issue specifically mentions context problems with useHead after updating to Nuxt 3.16.1. Since you're creating a completely new project and experiencing this issue, it suggests there might be a compatibility problem with the current version of Nuxt and Unhead. Possible solutions: 1. Try using an older version of Nuxt: You could try creating a project with Nuxt 3.15.x which used Unhead v1:

   npx [email protected] init my-project

   npx [email protected] init my-project

2. Check for updates: Since this appears to be a recent issue, it might be fixed in upcoming patches. Make sure you're using the latest versions of all packages. 3. Add the legacy compatibility flag: According to the upgrade guide, you can enable legacy compatibility for Unhead v2:

   // nuxt.config.ts
   export default defineNuxtConfig({
     unhead: {
       legacy: true,
     }
   })

   // nuxt.config.ts
   export default defineNuxtConfig({
     unhead: {
       legacy: true,
     }
   })

4. Report the issue: If none of the above solutions work, consider reporting this issue on the Nuxt GitHub repository with your specific environment details. The infinite recursion you're experiencing is likely due to the changes in how context is handled in Unhead v2, and the Nuxt team is actively working on addressing these compatibility issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@368376438182903808> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

fischi20OP•7d ago

so failed attempts after this post: 1. unhead legacy: true 2. [email protected] 3. manually setting unhead to 2.0.8 @kapa.ai any other ideas?

kapa.ai•7d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your frustration with this persistent issue. Since you've already tried the most common solutions, let's explore some additional approaches: 1. Try the experimental polyfill option: Nuxt has an experimental feature that adds a compatibility layer for the old @vueuse/head API:

   // nuxt.config.ts
   export default defineNuxtConfig({
     experimental: {
       polyfillVueUseHead: true
     }
   })

   // nuxt.config.ts
   export default defineNuxtConfig({
     experimental: {
       polyfillVueUseHead: true
     }
   })

Experimental Features documentation 2. Check for conflicting imports: Make sure you're not directly importing from @unhead/vue in your code. As mentioned in the upgrade guide, it's recommended to update imports:

   -import { useHead } from '@unhead/vue'
   +import { useHead } from '#imports'

   -import { useHead } from '@unhead/vue'
   +import { useHead } from '#imports'

Upgrade Guide 3. Clear cache thoroughly: Try completely clearing all caches:

   rm -rf node_modules .nuxt .output
   npm cache clean --force  # or equivalent for your package manager

   rm -rf node_modules .nuxt .output
   npm cache clean --force  # or equivalent for your package manager

Then reinstall dependencies and try again. 4. Try a different Node.js version: Sometimes these issues can be related to specific Node.js versions. 5. Check for environment-specific issues: Since you mentioned trying it on another machine, there might be something specific to your environment causing the issue. Check for any global npm packages or environment variables that might be interfering. 6. Inspect network requests: Check if there are any failed network requests during the build process that might be causing issues with loading dependencies correctly. If none of these solutions work, this might be a deeper issue that requires attention from the Nuxt team. Consider opening a detailed issue on GitHub with your exact environment details, reproduction steps, and the full error stack trace. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@368376438182903808> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Project creation useHead infinite recursion

Did you find this page helpful?