Nuxt•5d ago

Unhead syntax error in browser

I started a new nuxt project with Node 22 LTS and latest nuxt 3.16.2 Devtools are not loading and I get an error in the console like such: Uncaught SyntaxError: The requested module 'http://localhost:3000/_nuxt/node_modules/.pnpm/[email protected]/node_modules/unhead/dist/index.mjs?v=6f3b3302' doesn't provide an export named: 'getActiveHead' I am using following modules: modules: ['@nuxtjs/tailwindcss', 'nuxt-graphql-request','@nuxtjs/i18n'] What seems to be the issue?

8 Replies

kapa.ai•5d ago

Hi @tb13. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This error is related to a compatibility issue with Unhead v2, which was introduced in Nuxt 3.16.x. The error occurs because your application is trying to use the getActiveHead export which is no longer available in the newer version of Unhead. There are a few potential solutions: 1. Check for outdated dependencies: This issue commonly occurs when you have outdated modules that depend on older versions of Unhead. As mentioned in a similar issue, updating dependencies like @nuxt/scripts to the latest version (0.11.1+) can solve this problem Github Issue #31265. 2. Enable legacy mode: If updating dependencies doesn't work, you can enable Unhead's legacy compatibility mode in your nuxt.config.ts:

export default defineNuxtConfig({
  unhead: {
    legacy: true
  }
})

export default defineNuxtConfig({
  unhead: {
    legacy: true
  }
})

This setting enables compatibility with older Unhead APIs Nuxt Configuration API. 3. Check for direct imports: If you're directly importing from @unhead/vue instead of using Nuxt's auto-imports, consider updating those imports to use #imports or nuxt/app instead:

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

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

This issue is part of the breaking changes introduced with Unhead v2 in Nuxt 3.16.x. The Nuxt team has been working on ensuring backward compatibility, but some edge cases still exist, especially with certain module combinations Upgrade Guide. If none of these solutions work, you might need to check if you have any other modules that depend on Unhead and make sure they're all updated to the latest versions compatible with Nuxt 3.16.2. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

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

tb13OP•5d ago

@kapa.ai I updated my question with the modules I am using ...

kapa.ai•5d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I notice that you mentioned updating your question with the modules you're using, but I don't see that information in your current message. To properly diagnose the Unhead export error you're experiencing, knowing which modules you're using would be very helpful. Based on the knowledge sources and our previous conversation, this error is typically caused by: 1. Outdated dependencies that rely on older versions of Unhead 2. Mismatched versions between Nuxt and its modules The most common fix for the "doesn't provide an export named: 'getActiveHead'" error is updating @nuxt/scripts to version 0.11.1 or newer, as mentioned in this GitHub issue. If you could share which modules you're using, I can provide more specific guidance. In the meantime, you could try: 1. Checking if you're using @nuxt/scripts and updating it:

npm install @nuxt/scripts@latest
# or
yarn add @nuxt/scripts@latest
# or
pnpm add @nuxt/scripts@latest

npm install @nuxt/scripts@latest
# or
yarn add @nuxt/scripts@latest
# or
pnpm add @nuxt/scripts@latest

2. Enabling Unhead legacy mode as suggested previously:

export default defineNuxtConfig({
  unhead: {
    legacy: true
  }
})

export default defineNuxtConfig({
  unhead: {
    legacy: true
  }
})

3. Checking for any direct imports from @unhead/vue in your code and updating them to use Nuxt's auto-imports. If you can share which modules you're using, I can provide more targeted assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

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

tb13OP•5d ago

@kapa.ai Ok upgrading to the latest @nuxtjs/i18n version resolved the issue!

kapa.ai•5d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm glad to hear that upgrading your i18n module resolved the issue! This aligns with what we've seen in similar cases where outdated dependencies can cause conflicts with Unhead v2, which was introduced in Nuxt 3.16.x. The i18n module specifically had compatibility issues after Nuxt updates, as documented in this Stack Overflow post where someone experienced problems after updating to Nuxt 3.8.0 and i18n to 8.0.0. These types of dependency conflicts are common during Nuxt updates, especially when major components like Unhead get upgraded. The error you were seeing with getActiveHead not being exported is a typical symptom of version mismatches between Nuxt core and its modules. For future reference, whenever you encounter similar issues after a Nuxt update, checking and updating all modules to their latest compatible versions is often the first and most effective troubleshooting step. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

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

Gaming

Programming

Unhead syntax error in browser

Did you find this page helpful?