i18n is not working after update nuxt to 3.8.0

Question

after I updated my nuxt framework to 3.8.0 and updated my i18n library to 8.0.0. and I added it to the module in "nuxt.config.ts"

  modules: ['@nuxtjs/i18n'],

after I write i18n config in "nuxt.config.ts":

  i18n: {
locales: [
    {
        code: 'fa',
        iso: 'fa-IR',
        name: 'Farsi',
        file: 'fa-IR.json',
        dir: 'rtl',
    },
    {
        code: 'en',
        iso: 'en-US',
        name: 'English',
        file: 'en-US.json',
        dir: 'ltr',
    },
],
defaultLocale: 'fa',
detectBrowserLanguage: false,
langDir: "lang",
vueI18n: {
    legacy: false,
    fallbackLocale: 'en',
}

}

I got this error about i18n:

 ERROR  Cannot start nuxt:  input.includes is not a function   
at normalizeWindowsPath (node_modules/.pnpm/pathe@1.1.1/node_modules/pathe/dist/shared/pathe.92c04245.mjs:2:24)

and some other node-module errors.

any idea how can I fix this??

Answer 1

Let me improve and explain Amirreza answer

The error is due to the fact that in the new version module, vueI18n block is no longer loaded as a config, and is interpreted by plugin as a path to a config file.

To solve problem:

1. Update of all update your i18n dependency
2. Create a new file called i18n.config.ts in project root
3. Move out all content of your i18n.vueI18n from nuxt.config.ts to this file and replace i18n.vueI18n with './i18n.config.ts'

As example my config:

i18n: {
    locales: [{code: 'ru', file: "ru.json", name: "Русский"}, {code: 'en', file: "en.json", name: "English"}],
    defaultLocale: 'ru',
    vueI18nLoader: true,
    vueI18n: {
        fallbackLocale: 'ru'
    }
}

Corrected to:

i18n: {
    locales: [{code: 'ru', file: "ru.json", name: "Русский"}, {code: 'en', file: "en.json", name: "English"}],
    defaultLocale: 'ru',
    langDir: '~/langs/',
    vueI18nLoader: true,
    vueI18n: './i18n.config.ts'
}

And my i18n.config.ts:

export default defineI18nConfig(() => ({
    fallbackLocale: 'ru'
}))

Answer 2

Okay, I can fix the problem first of all update your i18n dependency after that create a new file called i18n.config.ts in there, I write this code:

export default defineI18nConfig(() => ({
legacy: false,
locale: 'en',
messages: {
  en: {
    welcome: 'Welcome'
  },
  fr: {
    welcome: 'Bienvenue'
  }
}}))

At last, in nuxt.config.ts I called it

    i18n: {
    vueI18n: './i18n.config.ts'
}

you can check the i18n website to understand better structure of how it's work https://i18n.nuxtjs.org/