Nuxt•2w ago

Nuxt errors after refreshing package-lock.json (A composable that requires access...)

I'm getting the following errors after refreshing my package-lock.json/updating some packages: Error: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables. ⁃ at useNuxtApp (C:/Users/.../Documents/GitHub/es-nuxt/nodemodules/.pnpm/[email protected]@[email protected]_@[email protected][email protected][email protected][email protected]tgdyf4tahfh2p7d7ptjabx7uva/node_modules/nuxt/dist/app/nuxt.js:248:13) ⁃ at useRuntimeConfig (C:/Users/.../Documents/GitHub/es-nuxt/nodemodules/.pnpm/[email protected]@[email protected]_@[email protected][email protected][email protected][email protected]tgdyf4tahfh2p7d7ptjabx7uva/node_modules/nuxt/dist/app/nuxt.js:258:10) ⁃ at useLocalMarket (C:/Users/.../Documents/GitHub/es-nuxt/utils/localMarket.ts:3:60) 1 ┃ export default function useLocalMarket() { 2 ┃ const config = useRuntimeConfig().public ❯ 3 ┃ 4 ┃ const localMarket = config.localMarket 5 ┃ 6 ┃ const isLocalMarket = (country: string) => { 7 ┃ return localMarket.toLowerCase() === country.toLowerCase() 8 ┃ } 9 ┃ 10 ┃ const titlePostfix = () => { 11 ┃ let postfixMapping = new Map<string, string>() useLocalMarket is a composable: export default function useLocalMarket() { const config = useRuntimeConfig().public const localMarket = config.localMarket const isLocalMarket = (country: string) => { return localMarket.toLowerCase() === country.toLowerCase() } const titlePostfix = () => { let postfixMapping = new Map<string, string>() postfixMapping.set('be', 'België') postfixMapping.set('nl', 'Nederland') postfixMapping.set('flags', '') return postfixMapping.get(localMarket.toLowerCase()) } return { localMarket, isLocalMarket, titlePostfix } }

Nuxt

Auto-imports · Nuxt Concepts

Nuxt auto-imports components, composables, helper functions and Vue APIs.

2 Replies

kapa.ai•2w ago

Hi @Viridian. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you're encountering is a common issue in Nuxt applications when composables that require access to the Nuxt instance are called outside of the proper context. This typically happens after updating packages, especially when upgrading to newer Nuxt versions. Understanding the Error The error message indicates that useRuntimeConfig() is being called in your useLocalMarket composable in a way that doesn't have access to the Nuxt instance. This is happening because the composable is being executed outside of a Vue setup function, plugin, Nuxt hook, or middleware. According to the Nuxt documentation, the Nuxt context is only accessible in specific places:

Currently, the Nuxt context is only accessible in plugins, Nuxt hooks, Nuxt middleware (if wrapped in defineNuxtRouteMiddleware), and setup functions (in pages and components). Nuxt App Documentation

How to Fix the Issue There are several ways to fix this issue: 1. Move the composable call to a setup function Make sure you're only calling useLocalMarket() within a component's <script setup> block, a plugin, or a middleware, not directly in your code. 2. Restructure your composable Modify your useLocalMarket composable to ensure that useRuntimeConfig() is only called when the function is executed within a proper context:

export default function useLocalMarket() {
  // Get the config only when the function is called
  const getLocalMarket = () => {
    const config = useRuntimeConfig().public
    return config.localMarket
  }

  const isLocalMarket = (country: string) => {
    const localMarket = getLocalMarket()
    return localMarket.toLowerCase() === country.toLowerCase()
  }
const titlePostfix = () => {
    const localMarket = getLocalMarket()
    let postfixMapping = new Map<string, string>()
    postfixMapping.set('be', 'België')
    postfixMapping.set('nl', 'Nederland')
    postfixMapping.set('flags', '')
    return postfixMapping.get(localMarket.toLowerCase())
  }

  return {
    get localMarket() { return getLocalMarket() },
    isLocalMarket,
    titlePostfix
  }
}

export default function useLocalMarket() {
  // Get the config only when the function is called
  const getLocalMarket = () => {
    const config = useRuntimeConfig().public
    return config.localMarket
  }

  const isLocalMarket = (country: string) => {
    const localMarket = getLocalMarket()
    return localMarket.toLowerCase() === country.toLowerCase()
  }
const titlePostfix = () => {
    const localMarket = getLocalMarket()
    let postfixMapping = new Map<string, string>()
    postfixMapping.set('be', 'België')
    postfixMapping.set('nl', 'Nederland')
    postfixMapping.set('flags', '')
    return postfixMapping.get(localMarket.toLowerCase())
  }

  return {
    get localMarket() { return getLocalMarket() },
    isLocalMarket,
    titlePostfix
  }
}

3. Use runWithContext If you need to call the composable outside of a setup function, you can use nuxtApp.runWithContext:

const nuxtApp = useNuxtApp()
const result = nuxtApp.runWithContext(() => useLocalMarket())

const nuxtApp = useNuxtApp()
const result = nuxtApp.runWithContext(() => useLocalMarket())

This approach is mentioned in the Nuxt documentation:

In that case, you can also explicitly call functions within this context by using nuxtApp.runWithContext. Nuxt App Documentation

Possible Causes This issue often appears after updating packages because: 1. Recent versions of Nuxt (especially 3.16.x) have made changes to how the context is handled, particularly with the upgrade to Unhead v2 as mentioned in one of the GitHub issues:

In Nuxt 3.16 we upgraded to Unhead v2 (which I authored). This, for the most part, was a non-breaking change. GitHub Issue #31265

2. The error can also be related to how composables are auto-imported and when they're executed. By restructuring your composable to delay the call to useRuntimeConfig() until it's actually needed, you should be able to resolve this issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Gaming

Programming

Nuxt errors after refreshing package-lock.json (A composable that requires access...)

Did you find this page helpful?