fix(lazy): failure to load locales on SPA navigation to default locale (

#846)

Only triggered when i18n.fallbackLocale was not set.

Resolves #843

package.json

@@ -86,6 +86,7 @@
     "@intlify/vue-i18n-extensions": "^1.0.1",
     "@intlify/vue-i18n-loader": "^1.0.0",
     "cookie": "^0.4.0",
+    "deepcopy": "^2.1.0",
     "is-https": "^2.0.0",
     "js-cookie": "^2.2.1",
     "vue-i18n": "^8.18.1"

src/templates/plugin.main.js

@@ -1,3 +1,4 @@
+import deepcopy from 'deepcopy'
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 import { nuxtI18nSeo } from './seo-head'
@@ -50,12 +51,12 @@ export default async (context) => {
   if (process.server && lazy) {
     context.beforeNuxtRender(({ nuxtState }) => {
       const langs = {}
-      const { locale } = app.i18n
+      const { fallbackLocale, locale } = app.i18n
       if (locale) {
         langs[locale] = app.i18n.getLocaleMessage(locale)
       }
-      if (defaultLocale && locale !== defaultLocale) {
-        langs[defaultLocale] = app.i18n.getLocaleMessage(defaultLocale)
+      if (fallbackLocale && locale !== fallbackLocale) {
+        langs[fallbackLocale] = app.i18n.getLocaleMessage(fallbackLocale)
       }
       nuxtState.__i18n = { langs }
     })
@@ -219,7 +220,7 @@ export default async (context) => {
   }
 
   // Set instance options
-  const vueI18nOptions = typeof vueI18n === 'function' ? vueI18n(context) : vueI18n
+  const vueI18nOptions = typeof vueI18n === 'function' ? vueI18n(context) : deepcopy(vueI18n)
   vueI18nOptions.componentInstanceCreatedListener = extendVueI18nInstance
   app.i18n = new VueI18n(vueI18nOptions)
   // Initialize locale and fallbackLocale as vue-i18n defaults those to 'en-US' if falsey

test/browser.test.js

@@ -519,7 +519,6 @@ describe(`${browserString} (no fallbackLocale, browser language not supported)`,
     ]
 
     nuxt = (await setup(localConfig)).nuxt
-
     browser = await createBrowser()
   })
 
@@ -533,13 +532,92 @@ describe(`${browserString} (no fallbackLocale, browser language not supported)`,
 
   // Browser language is 'en' and so doesn't match supported ones.
   // Issue https://github.com/nuxt-community/i18n-module/issues/643
-  test('updates language after navigating to another locale', async () => {
+  test('updates language after navigating from default to non-default locale', async () => {
     page = await browser.newPage()
     await page.goto(url('/'))
-    expect(await (await page.$('body'))?.textContent()).toContain('locale: pl')
+    expect(await (await page.$('#current-locale'))?.textContent()).toBe('locale: pl')
+    expect(await (await page.$('#current-page'))?.textContent()).toBe('page: Strona glowna')
+    await navigate(page, '/no')
+    expect(await (await page.$('#current-locale'))?.textContent()).toBe('locale: no')
+    expect(await (await page.$('#current-page'))?.textContent()).toBe('page: Hjemmeside')
+  })
+
+  // Issue https://github.com/nuxt-community/i18n-module/issues/843
+  test('updates language after navigating from non-default to default locale', async () => {
+    page = await browser.newPage()
+    await page.goto(url('/no'))
+    expect(await (await page.$('#current-locale'))?.textContent()).toBe('locale: no')
+    expect(await (await page.$('#current-page'))?.textContent()).toBe('page: Hjemmeside')
+    await navigate(page, '/')
+    expect(await (await page.$('#current-locale'))?.textContent()).toBe('locale: pl')
+    expect(await (await page.$('#current-page'))?.textContent()).toBe('page: Strona glowna')
+  })
+})
+
+describe(`${browserString} (no fallbackLocale, browser language not supported, lazy)`, () => {
+  /** @type {Nuxt} */
+  let nuxt
+  /** @type {import('playwright-chromium').ChromiumBrowser} */
+  let browser
+  /** @type {import('playwright-chromium').Page} */
+  let page
+
+  beforeAll(async () => {
+    const overrides = {
+      i18n: {
+        defaultLocale: 'pl',
+        lazy: true,
+        langDir: 'lang/',
+        detectBrowserLanguage: {
+          fallbackLocale: null
+        },
+        vueI18n: {
+          fallbackLocale: null
+        }
+      }
+    }
+
+    const localConfig = loadConfig(__dirname, 'basic', overrides, { merge: true })
+
+    // Override after merging options to avoid arrays being merged.
+    localConfig.i18n.locales = [
+      { code: 'pl', iso: 'pl-PL', file: 'pl-PL.json' },
+      { code: 'no', iso: 'no-NO', file: 'no-NO.json' }
+    ]
 
+    nuxt = (await setup(localConfig)).nuxt
+    browser = await createBrowser()
+  })
+
+  afterAll(async () => {
+    if (browser) {
+      await browser.close()
+    }
+
+    await nuxt.close()
+  })
+
+  // Browser language is 'en' and so doesn't match supported ones.
+  // Issue https://github.com/nuxt-community/i18n-module/issues/643
+  test('updates language after navigating from default to non-default locale', async () => {
+    page = await browser.newPage()
+    await page.goto(url('/'))
+    expect(await (await page.$('#current-locale'))?.textContent()).toBe('locale: pl')
+    expect(await (await page.$('#current-page'))?.textContent()).toBe('page: Strona glowna')
     await navigate(page, '/no')
-    expect(await (await page.$('body'))?.textContent()).toContain('locale: no')
+    expect(await (await page.$('#current-locale'))?.textContent()).toBe('locale: no')
+    expect(await (await page.$('#current-page'))?.textContent()).toBe('page: Hjemmeside')
+  })
+
+  // Issue https://github.com/nuxt-community/i18n-module/issues/843
+  test('updates language after navigating from non-default to default locale', async () => {
+    page = await browser.newPage()
+    await page.goto(url('/no'))
+    expect(await (await page.$('#current-locale'))?.textContent()).toBe('locale: no')
+    expect(await (await page.$('#current-page'))?.textContent()).toBe('page: Hjemmeside')
+    await navigate(page, '/')
+    expect(await (await page.$('#current-locale'))?.textContent()).toBe('locale: pl')
+    expect(await (await page.$('#current-page'))?.textContent()).toBe('page: Strona glowna')
   })
 })
 

test/fixture/basic/lang/no-NO.json

@@ -0,0 +1,5 @@
+{
+    "home": "Hjemmeside",
+    "about": "Om oss",
+    "posts": "Artikkeler"
+}

test/fixture/basic/lang/pl-PL.json

@@ -0,0 +1,5 @@
+{
+    "home": "Strona glowna",
+    "about": "O stronie",
+    "posts": "Artykuly"
+}

yarn.lock

@@ -4981,6 +4981,13 @@ deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepcopy@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/deepcopy/-/deepcopy-2.1.0.tgz#2deb0dd52d079c2ecb7924b640a7c3abd4db1d6d"
+  integrity sha512-8cZeTb1ZKC3bdSCP6XOM1IsTczIO73fdqtwa2B0N15eAz7gmyhQo+mc5gnFuulsgN3vIQYmTgbmQVKalH1dKvQ==
+  dependencies:
+    type-detect "^4.0.8"
+
 deepmerge@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
@@ -13097,7 +13104,7 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-type-detect@4.0.8:
+type-detect@4.0.8, type-detect@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==