fix: respect detectBrowserLanguage: false in SSG plugin (#3410)

---------

Co-authored-by: apavlovsky <apavlovsky@greengeeks.com>
Co-authored-by: Bobbie Goede <bobbiegoede@gmail.com>

Author: 3 people

specs/fixtures/issues/3407/app.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <NuxtRouteAnnouncer />
+    <NuxtPage />
+  </div>
+</template>

specs/fixtures/issues/3407/i18n/locales/en.json

@@ -0,0 +1,4 @@
+{
+  "heading": "i18n SSG issue",
+  "text": "This is a test case of the nuxt/i18n SSG issue"
+}

specs/fixtures/issues/3407/i18n/locales/es.json

@@ -0,0 +1,4 @@
+{
+  "heading": "Problema de i18n SSG",
+  "text": "Este es un caso de prueba del problema de nuxt/i18n SSG"
+}

specs/fixtures/issues/3407/nuxt.config.ts

@@ -0,0 +1,30 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/i18n'],
+  i18n: {
+    // some of the options are taken from the runtimeConfig
+    strategy: 'no_prefix',
+    differentDomains: true,
+    lazy: false,
+    locales: [
+      {
+        code: 'en',
+        language: 'en-US',
+        isCatchallLocale: true,
+        domain: '127.0.0.1:7776',
+        // domain: 'en.localhost',
+        name: 'English',
+        files: ['en.json']
+      },
+      {
+        code: 'es',
+        language: 'es-ES',
+        domain: '127.0.0.1:7777',
+        // domain: 'es.localhost',
+        name: 'Español',
+        files: ['es.json']
+      }
+    ],
+    detectBrowserLanguage: false
+  }
+})

specs/fixtures/issues/3407/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "fixture-3407",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "@nuxtjs/i18n": "latest",
+    "nuxt": "latest"
+  }
+}

specs/fixtures/issues/3407/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1 id="translated-heading">{{ $t('heading') }}</h1>
+  </div>
+</template>

specs/helper.ts

@@ -109,7 +109,7 @@ export async function renderPage(path = '/', options?: BrowserContextOptions) {
 
   if (path) {
     /**
-     * Nuxt uses `gotoPath` here, ths would throw errors as the given `path` can differ
+     * Nuxt uses `gotoPath` here, this would throw errors as the given `path` can differ
      * from the final path due to language detection and redirects.
      */
     // gotoPath(page, path)

specs/issues/3407.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from 'vitest'
+import { fileURLToPath } from 'node:url'
+import { createPage, setup, url } from '../utils'
+import { getText } from '../helper'
+
+// this is an SSG test
+await setup({
+  rootDir: fileURLToPath(new URL(`../fixtures/issues/3407`, import.meta.url)),
+  browser: true,
+  prerender: true,
+  port: [7777, 7776]
+})
+
+test('does not reset cookie no refresh', async () => {
+  const page = await createPage('/')
+  const heading = await getText(page, '#translated-heading')
+  expect(heading).toEqual(`Problema de i18n SSG`)
+
+  await page.goto(url('/', 7776))
+  const heading2 = await getText(page, '#translated-heading')
+  expect(heading2).toEqual(`i18n SSG issue`)
+})

specs/utils/browser.ts

@@ -49,7 +49,7 @@ export async function waitForHydration(page: Page, url: string, waitUntil?: Goto
   }
 }
 
-export async function createPage(path?: string, options?: BrowserContextOptions) {
+export async function createPage(path?: string, options?: BrowserContextOptions, port?: number) {
   const browser = await getBrowser()
   const page = await browser.newPage(options)
 
@@ -59,13 +59,14 @@ export async function createPage(path?: string, options?: BrowserContextOptions)
     if (waitUntil && ['hydration', 'route'].includes(waitUntil)) {
       delete options.waitUntil
     }
+
     const res = await _goto(url, options as Parameters<Page['goto']>[1])
     await waitForHydration(page, url, waitUntil)
     return res
   }
 
   if (path) {
-    await page.goto(url(path), { waitUntil: 'hydration' })
+    await page.goto(url(path, port), { waitUntil: 'hydration' })
   }
 
   return page

specs/utils/server.ts

@@ -9,6 +9,10 @@ import { resolve } from 'pathe'
 import { useTestContext } from './context'
 import { request } from 'undici'
 
+function toArray<T>(value: T | T[]): T[] {
+  return Array.isArray(value) ? value : [value]
+}
+
 // @ts-expect-error type cast
 // eslint-disable-next-line
 const kit: typeof _kit = _kit.default || _kit
@@ -17,8 +21,8 @@ export async function startServer(env: Record<string, unknown> = {}) {
   const ctx = useTestContext()
   await stopServer()
   const host = '127.0.0.1'
-  const port = ctx.options.port || (await getRandomPort(host))
-  ctx.url = `http://${host}:${port}`
+  const ports = ctx.options.port ? toArray(ctx.options.port) : [await getRandomPort(host)]
+  ctx.url = `http://${host}:${ports[0]}`
   if (ctx.options.dev) {
     const nuxiCLI = await kit.resolvePath('nuxi/cli')
     ctx.serverProcess = exec(nuxiCLI, ['_dev'], {
@@ -27,15 +31,15 @@ export async function startServer(env: Record<string, unknown> = {}) {
         stdio: 'inherit',
         env: {
           ...process.env,
-          _PORT: String(port), // Used by internal _dev command
-          PORT: String(port),
+          _PORT: String(ports[0]), // Used by internal _dev command
+          PORT: String(ports[0]),
           HOST: host,
           NODE_ENV: 'development',
           ...env
         }
       }
     })
-    await waitForPort(port, { retries: 32, host }).catch(() => {})
+    await waitForPort(ports[0], { retries: 32, host }).catch(() => {})
     let lastError
     for (let i = 0; i < 150; i++) {
       await new Promise(resolve => setTimeout(resolve, 100))
@@ -51,35 +55,36 @@ export async function startServer(env: Record<string, unknown> = {}) {
     ctx.serverProcess.kill()
     throw lastError || new Error('Timeout waiting for dev server!')
   } else if (ctx.options.prerender) {
-    const command = `pnpx serve ${ctx.nuxt!.options.nitro!.output?.publicDir} -l tcp://${host}:${port} --no-port-switching`
-    // ; (await import('consola')).consola.restoreConsole()
+    const listenTo = ports.map(port => `-l tcp://${host}:${port}`).join(' ')
+    const command = `pnpx serve ${ctx.nuxt!.options.nitro!.output?.publicDir} ${listenTo} --no-port-switching`
+    // ;(await import('consola')).consola.restoreConsole()
     const [_command, ...commandArgs] = command.split(' ')
 
     ctx.serverProcess = exec(_command, commandArgs, {
       nodeOptions: {
         env: {
           ...process.env,
-          PORT: String(port),
+          PORT: String(ports[0]),
           HOST: host,
           ...env
         }
       }
     })
 
-    await waitForPort(port, { retries: 32, host, delay: 1000 })
+    await waitForPort(ports[0], { retries: 32, host, delay: 1000 })
   } else {
     ctx.serverProcess = exec('node', [resolve(ctx.nuxt!.options.nitro.output!.dir!, 'server/index.mjs')], {
       nodeOptions: {
         stdio: 'inherit',
         env: {
           ...process.env,
-          PORT: String(port),
+          PORT: String(ports[0]),
           HOST: host,
           ...env
         }
       }
     })
-    await waitForPort(port, { retries: 20, host })
+    await waitForPort(ports[0], { retries: 20, host })
   }
 }
 
@@ -102,14 +107,21 @@ export function undiciRequest(path: string, options?: Parameters<typeof request>
   return request(url(path), options)
 }
 
-export function url(path: string) {
+export function url(path: string, port?: number) {
   const ctx = useTestContext()
   if (!ctx.url) {
     throw new Error('url is not available (is server option enabled?)')
   }
+
   if (path.startsWith(ctx.url)) {
     return path
   }
+
+  // replace port in url
+  if (port != null) {
+    return ctx.url.slice(0, ctx.url.lastIndexOf(':')) + `:${port}/` + path
+  }
+
   return ctx.url + path
 }
 

specs/utils/types.ts

@@ -26,7 +26,7 @@ export interface TestOptions {
     launch?: LaunchOptions
   }
   server: boolean
-  port?: number
+  port?: number | number[]
 }
 
 export interface TestContext {

src/runtime/plugins/ssg-detect.ts

@@ -2,15 +2,21 @@ import { unref } from 'vue'
 import { isSSG } from '#build/i18n.options.mjs'
 import { defineNuxtPlugin } from '#imports'
 import { createLogger } from '#nuxt-i18n/logger'
-import { detectBrowserLanguage } from '../internal'
+import { detectBrowserLanguage, runtimeDetectBrowserLanguage } from '../internal'
 import type { NuxtApp } from '#app'
+import type { I18nPublicRuntimeConfig } from '#internal-i18n-types'
 
 export default defineNuxtPlugin({
   name: 'i18n:plugin:ssg-detect',
   dependsOn: ['i18n:plugin', 'i18n:plugin:route-locale-detect'],
   enforce: 'post',
   setup(nuxt) {
-    if (!isSSG || (nuxt as NuxtApp).$i18n.strategy !== 'no_prefix') return
+    if (
+      !isSSG ||
+      (nuxt as NuxtApp).$i18n.strategy !== 'no_prefix' ||
+      !runtimeDetectBrowserLanguage(nuxt.$config.public.i18n as I18nPublicRuntimeConfig)
+    )
+      return
 
     const nuxtApp = nuxt as NuxtApp
     const logger = /*#__PURE__*/ createLogger('plugin:i18n:ssg-detect')