Use .env variables on defineI18nConfig

[50l3r]

Environment

---

• Operating System: Windows_NT
• Node Version: v18.17.1
• Nuxt Version: 3.8.0
• CLI Version: 3.9.1
• Nitro Version: 2.7.1
• Package Manager: [email protected]
• Builder: -
• User Config: app, routeRules, modules, css, runtimeConfig, components, typescript, postcss, nitro, srcDir, hooks, devtools
• Runtime Modules: @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], @pinia/[email protected], @pinia-plugin-persistedstate/[email protected], [email protected]
• Build Modules: -

---

Reproduction

import type { LocaleMessage } from '@intlify/core-base'
import type { VueMessageType } from '@nuxtjs/i18n/dist/runtime/composables'

export default defineI18nConfig(async () => ({
    legacy: false,
    locale: 'es',
    messages: await loadLocale()
}))

type Strings = Record<string, LocaleMessage<VueMessageType>>

const loadLocale = (): Promise<Strings> => {
    return new Promise((resolve, reject) => {
        fetch(`${process.env.NUXT_PUBLIC_API_URL}/cms/strings`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        })
            .then(async (res) => {
                const data = await res.json()
                resolve(data)
            })
            .catch((error) => {
                reject(error)
            })
    })
}

Describe the bug

I need to use environment variables inside defineI18nConfig but i recieve undefined in some cases:

[Vue Router warn]: No match found for location with path "/undefined/cms/strings"

I receive the correct string at the start but after a while it stops working.

chrome_ILuUy04jXB.mp4

There seems to be a point where I do get access to process.env.NUXT_PUBLIC_API_URL but it stops working after a while.

I cannot access useRuntimeConfig either because I am not in the nuxt context.

Additional context

No response

Logs

No response

[kazupon]

Hmm, it seems that it is not accessible in the defineI18nConfig called in the plugin. 🤔

@danielroe
The defineI18nConfig is loaded by a plugin defined by nuxt i18n via defineNuxtPlugin. As far as I am aware, it is then accessible via public values (useRuntimeConfig) defined in environment variables by nuxt. Why can't I access it on the plugin side?

[BobbieGoede]

@kazupon @danielroe
After trying to debug this issue, I found that useRuntimeConfig does not work (seems to work client side?) if the dynamic imports for the i18n configs are imported from within a function in the generated i18n.options.mjs file (this function gets called from plugin).

This does work if the imports happen directly inside the plugin, see BobbieGoede#18 (still need to clean it up a bit, hence PR on my fork). Maybe it is preferable to move that logic out of the generated file anyway so that the types get checked.

I don't know why this does work and the other approach does not 😅.. Maybe there is an easy way to debug this that I'm unaware of 🤔.

[BobbieGoede]

I'm closing this as it should be possible to use useRuntimeConfig on the edge release channel since #2252. Let me know if you're running into any issues, will reopen if that is the case!

[mctweb]

I'm still having issues with this -
[nuxt] [request error] [unhandled] [500] [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#using-vue-and-nuxt-composables.

This is using '"@nuxtjs/i18n": "8.0.0-rc.5",'