Lazy loading messages broken in production build

[erikuit]

Environment

Nuxt project info:

---

• Operating System: Linux
• Node Version: v18.17.1
• Nuxt Version: 3.7.0
• CLI Version: 3.7.2
• Nitro Version: 2.6.2
• Package Manager: [email protected]
• Builder: -
• User Config: app, sourcemap, vite, components, modules, i18n, runtimeConfig, googleFonts, build, bundle, css
• Runtime Modules: @nuxtjs/[email protected], @nuxtjs/[email protected]
• Build Modules: -

---

👉 Report an issue: https://github.com/nuxt/nuxt/issues/new

👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new

👉 Read documentation: https://nuxt.com

Reproduction

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

Describe the bug

Translation messages are no longer loading in the production build when using lazy: true and langDir in the configuration. The development build works as expected.

Additional context

Problem started occuring a few hours ago, could it somehow be related to 417af83 ?
Downgrading to @nuxtjs/[email protected] didn't resolve the issue.

Logs

No response

[codeflorist]

same problem here. i still have a yarn.lock, where it is working, but couldn't pinpoint the package at fault. it's definitely not @nuxtjs/[email protected], since i have that in the working lockfile.

[AwesomeAnders]

Same problem here. Translations broken only in production build.

[BobbieGoede]

@erikuit
I believe I have found part of a workaround to this issue by overriding some dependencies, I changed your reproduction here to demonstrate.

Try adding the following to your package.json:

  "overrides": {
    "@intlify/bundle-utils": "7.0.2",
    "@intlify/message-compiler": "9.3.0-beta.24",
    "@intlify/shared": "9.3.0-beta.24"
  }

It looks like this only fixes the translation on the client-side though, so it throws a hydration mismatch error and untranslated text is visible on load for a short moment.

@kazupon
I'm not sure but maybe this is related to changes in or after intlify/bundle-tools#287? The project does make requests for the locale files and noticed they looked slightly different. Not sure why the overrides make it work on the client-side but not on the server-side.

[erikuit]

@BobbieGoede Thanks for the workaround! Can confirm that this also works for my original project.

[BobbieGoede]

@erikuit Happy to hear it works!

Something different may be going on altogether, the issue in the reproduction can be solved by simply adding defaultLocale: 'en' to the i18n configuration 😅 reproduction to demonstrate here.

[erikuit]

@BobbieGoede Interesting! I have defaultLocale set in my original project, but there it doesn't work. Still working out the difference.

[ChrisGV04]

Same issue with me. And it only happens on the production build. Here are my settings:

// nuxt.config.ts
i18n: {
  lazy: true,
  langDir: 'lang',
  defaultLocale: 'en',
  locales: [
    { code: 'en', file: 'en.json' },
    { code: 'es', file: 'es.json' },
  ],
  detectBrowserLanguage: {
    useCookie: true,
    redirectOn: 'root',
    cookieKey: 'i18n_redirected',
  },
},

// i18n.config.ts
export default defineI18nConfig(() => ({ legacy: false, locale: 'en' }));

I have my project using the srcDir: "src" and the language files are inside src/lang. For some reason everything was working just before I ran pnpx nuxi upgrade --force as suggested when updating Nuxt.

I tried using the workaround @BobbieGoede suggested but it's still not working.

EDIT: I'm getting this inside the logs but for every single key:

[intlify] Not found 'navigation.home' key in 'en' locale messages.

[ChrisGV04]

For anyone using pnpm that need to use the workaround, it must be set inside pnpm.overrides as such:

{
  "pnpm": {
    "overrides": {
      "@intlify/bundle-utils": "7.0.2",
      "@intlify/message-compiler": "9.3.0-beta.24",
      "@intlify/shared": "9.3.0-beta.24"
    }
  }
}

[kazupon]

@BobbieGoede

I'm not sure but maybe this is related to changes in or after intlify/bundle-tools#287 feat(bundle-utils): support AST minify option?

Yeah, 😅
I have recently changed the nuxt i18n deps @intlify/bundle-utils, @intlify/unplugin-vue-i18n, and vue-i18n related packages.
The handling around bundles has changed a little in those.

I have confirmed that the edge channel version works correctly on the reproduction repo.

The workaround is to override it with the override function of the package manager or use the edge channel version.

I will release v8.0.0-rc.4 soon. That should solve this issue.

[kazupon]

I've just released nuxt i18n v8.0.0-rc.4
please check it!

[erikuit]

Solved the issue on my end. Thank you!

[nazar1ua]

For me too! Thanks!