Reinier Kaper Comments - Answer Overflow

Reinier Kaper

Posts Comments

NNuxt

•Created by Reinier Kaper on 2/3/2025 in #❓・help

Hydration error with i18n

location-vr is a French route, rv-rental is the English counterpart (English is our default language btw)

27 replies

NNuxt

•Created by Reinier Kaper on 2/3/2025 in #❓・help

Hydration error with i18n

27 replies

NNuxt

•Created by Reinier Kaper on 2/3/2025 in #❓・help

Hydration error with i18n

Okay this still keeps happening, I have a feeling it's based on the user's OS. Previously this was an issue too, where the following oddity occurred: - English OS - English i18n selection: good - English OS - French i18n selection: good - French OS - English i18n selection: good - French OS - French i18n selection: server render in English I wonder if this is still an issue, as I see people landing on /fr/some-route and the server rendering in English again. I will investigate more today, hopefully I can reproduce it again like last time. At least I now know where to look. Additional question: if people visited the site before (say a week ago) and they revisit again today (fixed version of the site), would there still be something cached (cookie/localstorage/broswer-cache/etc?) that could cause the "old" behaviour temporarily?

27 replies

NNuxt

•Created by Reinier Kaper on 2/3/2025 in #❓・help

Hydration error with i18n

👍

27 replies

NNuxt

•Created by Reinier Kaper on 2/3/2025 in #❓・help

Hydration error with i18n

I can't reproduce this myself though, so I wonder if there's an aspect of caching going on

27 replies

NNuxt

•Created by Reinier Kaper on 2/3/2025 in #❓・help

Hydration error with i18n

Interesting: after releasing our update in the wild, we now seem to get to opposite issue: where the server renders French, instead of English (the requested language). I'll keep an eye on it, but this feels like the fix wasn't fully effective

27 replies

NNuxt

•Created by Reinier Kaper on 2/3/2025 in #❓・help

Hydration error with i18n

I'll manually update the package and deploy it, thanks!

27 replies

NNuxt

•Created by Reinier Kaper on 2/3/2025 in #❓・help

Hydration error with i18n

Oeh, yes I think that fixed everything. Pfew!

27 replies

NNuxt

•Created by Reinier Kaper on 2/3/2025 in #❓・help

Hydration error with i18n

Okay, let me update to latest, just to rule it out. Even if we can't upgrade yet. Thanks for the help!

27 replies

NNuxt

•Created by Reinier Kaper on 2/3/2025 in #❓・help

Hydration error with i18n

nuxt: 3.15.2 i18n: 9.1.3

27 replies

NNuxt

•Created by Reinier Kaper on 2/3/2025 in #❓・help

Hydration error with i18n

Yeah I'm trying to get the starter to fail, but I can't. It's something in our project, but even if I disable all other modules it seems to go wrong. Very hard to pin-point and we can't update Nuxt because it brakes other modules. I'll see if I can update to latest i18n though and see if that helps

27 replies

NNuxt

•Created by Reinier Kaper on 2/3/2025 in #❓・help

Hydration error with i18n

@Bobbie sorry for the ping. I can't repro this in Stackblitz, everything looks normal there. Our config is pretty much the same, but for some reason the server always returns en, instead of the right locale. Any pointers as to where we might need to look? This is our config:

{
        vueI18n: './i18n.config.ts',
        restructureDir: 'src',
        locales: [
          {
            code: 'en',
            name: 'English',
            language: 'en',
            file: 'en.js',
          },
          {
            code: 'fr',
            name: 'Français',
            language: 'fr',
            file: 'fr.js',
          },
        ],
        lazy: true,
        langDir: 'locales',
        defaultLocale: 'en',
        baseUrl: process.env.NUXT_PUBLIC_BASE_URL,
        detectBrowserLanguage: false,
        strategy: 'prefix_and_default',
        compilation: {
          strictMessage: false,
        },
      },

{
        vueI18n: './i18n.config.ts',
        restructureDir: 'src',
        locales: [
          {
            code: 'en',
            name: 'English',
            language: 'en',
            file: 'en.js',
          },
          {
            code: 'fr',
            name: 'Français',
            language: 'fr',
            file: 'fr.js',
          },
        ],
        lazy: true,
        langDir: 'locales',
        defaultLocale: 'en',
        baseUrl: process.env.NUXT_PUBLIC_BASE_URL,
        detectBrowserLanguage: false,
        strategy: 'prefix_and_default',
        compilation: {
          strictMessage: false,
        },
      },

And root config file

export default defineI18nConfig(() => ({
  legacy: false,
  availableLocales: ['en', 'fr'],
  fallbackLocale: 'en',
  fallbackWarn: import.meta.dev,
  globalInjection: true,
}))

export default defineI18nConfig(() => ({
  legacy: false,
  availableLocales: ['en', 'fr'],
  fallbackLocale: 'en',
  fallbackWarn: import.meta.dev,
  globalInjection: true,
}))

27 replies

NNuxt

•Created by Reinier Kaper on 2/3/2025 in #❓・help

Hydration error with i18n

Who does what?

27 replies

NNuxt

•Created by Reinier Kaper on 2/3/2025 in #❓・help

Hydration error with i18n

@kapa.ai

27 replies

NNuxt

•Created by Reinier Kaper on 2/3/2025 in #❓・help

Hydration error with i18n

When I access a French route, i18n always incorrectly returns en as the locale in a plugin:

export default defineNuxtPlugin((nuxtApp) => {
  console.log(nuxtApp.$i18n.locale.value) // always `en`
})

export default defineNuxtPlugin((nuxtApp) => {
  console.log(nuxtApp.$i18n.locale.value) // always `en`
})

27 replies

NNuxt

•Created by Reinier Kaper on 12/16/2024 in #❓・help

Can't get Vitest Extension to resolve Nuxt's auto-imports

@kapa.ai this is not the issue. The problem is both imports in test files from, say, ~/utils/some-util and auto-imports in the source files. For example:

// some-util.ts
export function doThing() {
  return someAutoImport(true)
}

// some-util.ts
export function doThing() {
  return someAutoImport(true)
}

15 replies

NNuxt

•Created by Reinier Kaper on 12/16/2024 in #❓・help

Can't get Vitest Extension to resolve Nuxt's auto-imports

@kapa.ai The issue is not with auto-imports in the source files. It's the auto-imports in the test files that don't work

15 replies

NNuxt

•Created by LuLuCat on 11/30/2024 in #❓・help

Is there a way generating openapi client for Nuxt fetch API

Would this work? https://github.com/enkot/nuxt-open-fetch We use it to generate our own clients with

5 replies

NNuxt

•Created by FearArt on 11/30/2024 in #❓・help

useCookie returns undefined

Would fetchUsers need to be awaited in order for the cookie to appear? That would explain why it's undefined (because fetchUsers isn't resolved yet) Try awaiting that call first

6 replies

NNuxt

•Created by Markus on 7/22/2024 in #❓・help

Nested M2A

And you're sure title actually exists in the data? I.e. if you remove the fields, does it work?

6 replies

Gaming

Programming