i18n issues when running "node .output/server/index.mjs", while "nuxt dev" and "nuxt preview" works fine

[martinsjek]

Environment

• Nuxt Version: 3.1.1
• Nitro Version: 2.1.1
• Package Manager: [email protected]
• Builder: vite
• User Config: modules, css, vite, nitro, runtimeConfig, router, app, image, i18n, telemetry
• Runtime Modules: @nuxtjs/[email protected], @nuxt/[email protected], @pinia/nuxt, @vueuse/[email protected]
• Build Modules: -

Reproduction

in app.vue:

const runtimeConfig = useRuntimeConfig();
const nuxtApp = useNuxtApp();

const { data } = await useFetch(${runtimeConfig.apiBaseUrl}/api/translations);

const translationsData = data.value;

nuxtApp.$i18n.warnHtmlMessage = false;

for (const i in translationsData) {
const translations = translationsData[i];
nuxtApp.$i18n.setLocaleMessage(i, translations);
}

Describe the bug

While running "nuxt dev" or "nuxt preview" everything works fine without any issues, but when running "node .output/server/index.mjs", then i get this error in console "[intlify] The message format compilation is not supported in this build. Because message compiler isn't included. You need to pre-compilation all message format.". And half of my translations show keys instead of translation in UI.

Additional context

No response

Logs

No response

[kazupon]

Thank you for your feedback!

"intlify The message format compilation is not supported in this build. Because message compiler isn't included. You need to pre-compilation all message format.".

vue-i18n (@intlify/unpluign-vue-i18n) pre-compiles locale messages (translations) is built for production, If these are used by import syntax in non-back-end code such as Vue Component or plugins.
https://vue-i18n.intlify.dev/guide/advanced/optimization.html#optimization

Unfortunately, in the case of back-end, such as Nuxt's API, vue-i18n cannot pre-compile it. 😞
If you would like to pass locale messages to the client-side from your API, you will need to pre-compile them in your API logic using intlify cli or compile API

[jianbin-lim]

Thank you for your feedback!

"intlify The message format compilation is not supported in this build. Because message compiler isn't included. You need to pre-compilation all message format.".

vue-i18n (@intlify/unpluign-vue-i18n) pre-compiles locale messages (translations) is built for production, If these are used by import syntax in non-back-end code such as Vue Component or plugins. https://vue-i18n.intlify.dev/guide/advanced/optimization.html#optimization

Unfortunately, in the case of back-end, such as Nuxt's API, vue-i18n cannot pre-compile it. 😞 If you would like to pass locale messages to the client-side from your API, you will need to pre-compile them in your API logic using intlify cli or compile API

Thank for your information, Is there a solution that can be fixed it on the front end(nuxt3)?

[kazupon]

I’m working on i18n resource pre-compilation that is possible using the current nuxt (nirto) prerender mechanism.
Maybe, we will include into this PR as experimental features.
#1938

[jianbin-lim]

I’m working on i18n resource pre-compilation that is possible using the current nuxt (nirto) prerender mechanism. Maybe, we will include into this PR as experimental features. #1938

Looking forward to this feature

[perenstrom]

Any updates on this @kazupon ? :)