HMR causes messages to break in the UI

[sawa-ko]

I'm trying to change a message in the translation file for a specific language, but when I do, no matter if I just swap one letter for another, all the messages break and only the translation keys for the messages are displayed. I have to reload the page for everything to load properly, but that's really annoying.

// i18n/locale-detector.ts
export default defineI18nLocaleDetector((event, config) => {
  const query = tryQueryLocale(event, { lang: '' })?.toString();
  const cookie = tryCookieLocale(event, { lang: '', name: 'i18n_locale' })?.toString();
  const header = tryHeaderLocale(event, { lang: '' })?.toString();

  const detected = query || cookie || header;

  const fallback =
    typeof config.fallbackLocale === 'string' ? config.fallbackLocale : config.defaultLocale;

  return detected || fallback;
});

// nuxt.config.ts
  i18n: {
    baseUrl: 'https://meisaku.art',
    strategy: 'prefix_except_default',
    defaultLocale: 'en-us',
    experimental: {
      localeDetector: 'locale-detector.ts',
    },
    detectBrowserLanguage: {
      cookieKey: 'meisaku-locale',
    },
    locales: [
      { code: 'en-us', file: 'en-us.json', isCatchallLocale: true },
      { code: 'es-419', file: 'es-419.json' },
    ],
  },

Grabacion.de.pantalla.2026-06-17.165125.mp4