Hydration text mismatch with SSR

dsvgl commented 1 year ago

Environment

Operating System: Darwin
Node Version: v16.17.1
Nuxt Version: 3.0.0
Nitro Version: 1.0.0
Package Manager: pnpm@7.25.1
Builder: vite
User Config: modules, i18n
Runtime Modules: @nuxtjs/i18n@8.0.0-beta.8-27906685.5bd81af
Build Modules: -

Reproduction

https://stackblitz.com/edit/github-gfwhki?file=nuxt.config.ts

Describe the bug

I previously was on this edge version where it worked fine: 8.0.0-beta.7-27893843.b72135e.

After updating to latest beta.8 or even latest edge, I get the following warning in browser console:

[Vue warn]: Hydration text mismatch:
- Client: " => homepage"
- Server: " => Startseite" 
  at <App key=1 > 
  at <NuxtRoot>

In the app.vue I display a locale variable. When refreshing the page, you can see that it briefly displays the name of the key and then changes to display the actual (correct) value.

In server console it logs [intlify] Not found 'homepage' key in 'de' locale messages.

Additional context

This doesn't happen with ssr: false.

Logs

No response

StefanoTesla commented 1 year ago

Related to #1804 now in SSG html there's language file string name

kazupon commented 1 year ago

I've just fixed this issue. You can try to use edge version

Thanks!

sawa-ko commented 1 year ago

Same problem here "@nuxtjs/i18n": "8.0.0-beta.8"

    i18n: {
        baseUrl: 'https://next.naeko.moe',
        strategy: 'prefix_except_default',
        lazy: true,
        langDir: 'locales/',
        defaultLocale: 'es',
        detectBrowserLanguage: {
            alwaysRedirect: true,
            fallbackLocale: 'es',
        },
        locales: [
            {
                code: 'es',
                name: 'Español',
                file: 'es.json',
            },
        ],
        vueI18n: {
            locale: 'es',
            legacy: false,
        },
    },

sawa-ko commented 1 year ago

@kazupon any idea? The page is SSG.

dsvgl commented 1 year ago

@kaname-png try edge version. There, it works for me.

StefanoTesla commented 1 year ago

Same problem here "@nuxtjs/i18n": "8.0.0-beta.8"

  i18n: {
      baseUrl: 'https://next.naeko.moe',
      strategy: 'prefix_except_default',
      lazy: true,
      langDir: 'locales/',
      defaultLocale: 'es',
      detectBrowserLanguage: {
          alwaysRedirect: true,
          fallbackLocale: 'es',
      },
      locales: [
          {
              code: 'es',
              name: 'Español',
              file: 'es.json',
          },
      ],
      vueI18n: {
          locale: 'es',
          legacy: false,
      },
  },

Remove the / from langDir, just 'locales'

sawa-ko commented 1 year ago

Same problem here "@nuxtjs/i18n": "8.0.0-beta.8"

    i18n: {
        baseUrl: 'https://next.naeko.moe',
        strategy: 'prefix_except_default',
        lazy: true,
        langDir: 'locales/',
        defaultLocale: 'es',
        detectBrowserLanguage: {
            alwaysRedirect: true,
            fallbackLocale: 'es',
        },
        locales: [
            {
                code: 'es',
                name: 'Español',
                file: 'es.json',
            },
        ],
        vueI18n: {
            locale: 'es',
            legacy: false,
        },
    },

Remove the / from langDir, just 'locales'

If I remove it, the lazy option asks me for it.

sawa-ko commented 1 year ago

@kaname-png try edge version. There, it works for me.

What is the Edge version?

dsvgl commented 1 year ago

@kaname-png try edge version. There, it works for me.

What is the Edge version?

https://github.com/nuxt-modules/i18n#install-edge-version

urbgimtam commented 1 year ago

Having the exact same issue, even after installing edge version.

https://stackblitz.com/edit/github-us1wuk?file=nuxt.config.ts

kazupon commented 1 year ago

@urbgimtam Hi! Could you try to re-install from clean (rm -rf node_modules package-lock.json) please? 🙏

I've just tried to download your repo and re-install, so I could not reproduce hydration miss-match. I think it has already fixed in the latest edge version

StefanoTesla commented 1 year ago

I confirm, in my 3 installations problem is solved

@urbgimtam Hi! Could you try to re-install from clean (rm -rf node_modules package-lock.json) please? 🙏

I've just tried to download your repo and re-install, so I could not reproduce hydration miss-match. I think it has already fixed in the latest edge version

sawa-ko commented 1 year ago

Any way to solve this?

No cookie is set by default when the user visits the page for the first time.
Even if the page is reloaded it does not save any cookies.
The cookie is only saved if the user switches to any other language and then switches back to the preferred language.
It happens when the page is pre-rendered (SSG), when the page is SSR the problem does not occur but the default cookie is still not saved.

    i18n: {
        baseUrl: 'https://next.naeko.moe',
        defaultLocale: 'en',
        strategy: 'prefix_except_default',
        langDir: 'locales',
        lazy: true,
        locales: [
            {
                name: 'English',
                code: 'en',
                iso: 'en-US',
                file: 'en.json',
            },
            {
                name: 'Español',
                code: 'es',
                file: 'es.json',
                iso: 'es-ES',
            },
        ],
        detectBrowserLanguage: {
            alwaysRedirect: true,
            redirectOn: 'all',
            cookieKey: 'neko-lang',
        },
    },

https://user-images.githubusercontent.com/56084970/214631082-c22f7dd7-5cdb-404d-bbf2-2f9b09f620e7.mp4

dsvgl commented 1 year ago

@kaname-png have you tried a clean install like mentioned above? rm -rf node_modules package-lock.json

I also got the example from @urbgimtam working with this approach. See this forked Stackblitz with newly created lock file: https://stackblitz.com/edit/github-us1wuk-bsbjoa?file=package.json

sawa-ko commented 1 year ago

@dsvgl Same problem. :( The cookie is not set by default and also shows the flash of switching from English to Spanish (current browser language) on SSG pages (as I showed in the previous video).