[next] Autoimports not defined on `nuxt generate` (i.e. `TypeError: t.$t is not a function.`)

[ndom91]

Version

@nuxtjs/i18n: 8.0.0-alpha.0-27551479.0f88897 nuxt: 3.0.0-rc.3

Nuxt configuration

Please change to [x] if relevant for this issue:

• [x] Applies to a site deployed to a static server (site generated with nuxt generate)
• [ ] Applies to a site deployed to a server with a Node backend

@nuxtjs/i18n configuration

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
  css: ['@/assets/index.css'],
  modules: ['@nuxtjs/i18n'],
  i18n: {
    detectBrowserLanguage: false,
    locales: [
      {
        code: 'en',
        name: 'English',
        iso: 'en-GB',
        file: 'en.json',
      },
      {
        code: 'fr',
        name: 'Français',
        iso: 'fr-FR',
        file: 'fr.json',
      },
      {
        code: 'de',
        name: 'Deutsch',
        iso: 'de-DE',
        file: 'de.json',
      },
    ],
    langDir: 'lang/',
    defaultLocale: 'en',
    vueI18n: {
      legacy: false,
      locale: 'en',
    },
  },
})

Reproduction Link

• Started a repro here (https://codesandbox.io/s/nuxt3-i18n-repro-1451-xvc1k3?file=/components/NavBar.vue), however the <select /> @change handler doesn't work at all for some reason? If anyone could help me debug, this codesandbox has everything else setup for a repro of this issue afaik.

Steps to reproduce

• See reproduction repository - https://codesandbox.io/s/nuxt3-i18n-repro-1451-xvc1k3?file=/components/NavBar.vue

What is Expected?

• Navigation directly to a locale prefixed route to work correctly, i.e. typing in https://company.com/fr/contact should work.
• Autoimported functions like $t and localePath should be accessible in the template in static builds (right?)

What is actually happening?

With the latest @nuxtjs/i18n-edge version (8.0.0-alpha.0-27551479.0f88897), loading of the locales strings files in local development worked. However, when trying to visit a direct locale-based link, i.e. /fr/contact instead of /contact, would cause the page to crash.

When deploying via nuxt generate (static build) to Netlify, for example, I would see the page (and the correct strings) flash on screen for ~200ms and then the site would crash, i.e. everything in the initial <NuxtPage /> would disappear (leaving only the NavBar in my case), and a bunch of console errors regarding the i18n autoimported functions like $t and localePath not being valid functions.

Also the direct navigation to language prefixed routes did not work in preview deploys.

I downgraded to 8.0.0-alpha.0-27531750.4e4cffe and all of a sudden everything worked as expected. So its got to be between these two releases..

I will try to prepare a codesandbox reproduction later on tomorrow.

This commenter seems to be having the same issue as me, and had mentioned it was working for him in the previous version, which is where I got the idea to try that specific version - https://github.com/nuxt-community/i18n-module/issues/1447#issuecomment-1135780841

[maxtomczyk]

Same effect after running yarn build

[NidMo]

I seem to have encountered the same problem as you, but I finally figured that when used with Pinia and useasyncdata, the injection would fail

[kazupon]

• Started a repro here (https://codesandbox.io/s/nuxt3-i18n-repro-1451-xvc1k3?file=/package.json), however the <select /> @change handler doesn't work at all for some reason? If anyone could help me debug, this codesandbox has everything else setup for a repro of this issue afaik.

You do not need to bypass with ref(locale.value). Simply specify the locale exported by useI18n directly to v-model and language switching work.

For nuxt generate, nuxt/i18n is still under development.

[ndom91]

• Started a repro here (codesandbox.io/s/nuxt3-i18n-repro-1451-xvc1k3?file=/package.json), however the <select /> @change handler doesn't work at all for some reason? If anyone could help me debug, this codesandbox has everything else setup for a repro of this issue afaik.

You do not need to bypass with ref(locale.value). Simply specify the locale exported by useI18n directly to v-model and language switching work.

For nuxt generate, nuxt/i18n is still under development.

Are you saying the @change="updateLanguageRoot" event handler is also not necessary on the <select /> element? i.e. setting the v-model = locale (locale from useI18n()) should be enough?

EDIT: I've made that change in the repro code sandbox, as well as upgraded to the latest @nuxtjs/[email protected] that was released today. Still not able to change the language via a button / select input. However, navigating directly to localhost:3000/ru, for example, now works!

EDIT 2: Okay but actually it seems that all JS event handlers are not workign in this codesandbox :thinking: i.e. <button @click="console.log('test')" /> is also not working..

See: https://codesandbox.io/s/nuxt3-i18n-repro-1451-xvc1k3?file=/components/NavBar.vue

[ndom91]

Also I tried the latest @nuxtjs/i18n-edge (8.0.0-alpha.0-27575102.2d1bbd2) release in my local project, where I noticed this bug to begin with, today and it doesn't seem to fix this either :/

When navigating directly to a locale prefixed link (i.e. localhost:3000/fr) it breaks, and clicking on links such as <NuxtLink :to="localePath('/')" /> also don't have any affect. The code still works just as expected with 8.0.0-alpha.0-27531750.4e4cffe.

[stafyniaksacha]

Maybe this can be related with js-cookie and cookie-es dependencies, which were introduced after 8.0.0-alpha.0-27531750.4e4cffe

[molotow11]

I have the same issue TypeError: t.$t is not a function after build.

[itancc]

This is also one of the problems in my integration. Could you give me a perfect solution? For me, this is urgent, grateful！

[ma-jahn]

Running into the same issue. Dev is looking fine on RC6 and a slightly changed @nuxtjs/i18n (vue-i18n-routing import failure). But for Production everything breaks.

We are building an app which is supposed to launch in a couple of weeks. No i'm having second thoughts about picking Nuxt 3 and SSG :-(

[rchl]

If you are launching something then maybe don't pick technologies that don't even have stable versions yet? :)

[ma-jahn]

@rchl Sure, fair point. Beta and RC of Nuxt 3 were looking pretty good and the roadmap looked fine as well. Didn't thought nuxt-i18n will be an issue as it always felt as a core part of nuxt.

Actually i just wanted to know if there is some kind of Roadmap for nuxt-i18n as well?

[schmidfelix]

Sorry for the ping, but is there any update on that?

[kazupon]

@nuxtjs/i18n has been already v8 beta if you would have still issue, please open the new issue. thanks!