"SyntaxError: Not support non-string message" on SSR

[jarkt]

I'm using vue-i18n 9.10.2 and @intlify/unplugin-vue-i18n 4.0.0.
In a setup function of a vue component I've used useI18n().
In the template I wrote: {{ i18n.t('example') }}

If the translation key "example" is not defined or global defined, it works as expected.
But once I use a <i18n> block, I get the following error on SSR and ONLY on SSR. In the client it works as expected.

file:///mnt/project/apps/frontend/app/node_modules/@intlify/message-compiler/dist/message-compiler.node.mjs:78
    const error = new SyntaxError(String(msg));
                  ^
SyntaxError: Not support non-string message
    at createCompileError (file:///mnt/project/apps/frontend/app/node_modules/@intlify/message-compiler/dist/message-compiler.node.mjs:78:19)
    at createCoreError (file:///mnt/project/apps/frontend/app/node_modules/@intlify/core-base/dist/core-base.mjs:483:12)
    at compileToFunction (file:///mnt/project/apps/frontend/app/node_modules/@intlify/core-base/dist/core-base.mjs:979:15)
    at compileMessageFormat (file:///mnt/project/apps/frontend/app/node_modules/@intlify/core-base/dist/core-base.mjs:1284:17)
    at translate (file:///mnt/project/apps/frontend/app/node_modules/@intlify/core-base/dist/core-base.mjs:1131:11)
    at file:///mnt/project/apps/frontend/app/node_modules/vue-i18n/dist/vue-i18n.mjs:559:48
    at wrapWithDeps (file:///mnt/project/apps/frontend/app/node_modules/vue-i18n/dist/vue-i18n.mjs:504:19)
    at Proxy.t (file:///mnt/project/apps/frontend/app/node_modules/vue-i18n/dist/vue-i18n.mjs:559:16)
    at eval (/mnt/project/apps/frontend/app/src/components/static/Account/AccountDevices.vue:97:77)
    at Proxy.ssrRenderList (/mnt/project/apps/frontend/app/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:433:7)
    at _sfc_ssrRender (/mnt/project/apps/frontend/app/src/components/static/Account/AccountDevices.vue:94:25)
    at renderComponentSubTree (/mnt/project/apps/frontend/app/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:683:9)
    at /mnt/project/apps/frontend/app/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:629:25
    at processTicksAndRejections (node:internal/process/task_queues:95:5) {
  code: 20,
  domain: undefined
}

It doesn't matter which language I define for the block or if it is global.
Wondering why there is no ticket according this issue. How can you go wrong?

These are the plugins in vite.config.ts:

plugins: [
  vue(),
  vueJsx(),
  VueI18nPlugin({
    include: resolve(dirname(fileURLToPath(import.meta.url)), './src/locales/**'),
    defaultSFCLang: "yaml",
    ssr: true
  })
],

I create the vue plugin with this code:

import {createI18n} from "vue-i18n"
import messages from "@intlify/unplugin-vue-i18n/messages"

export function createI18nPlugin() {
  return createI18n({
    locale: "de",
    fallbackLocale: "en",
    legacy: false,
    messages
  })
}

[kevinwarne]

Bump I'm also getting this error when trying to ssg prerender with the vue-i18n plugin.

If I print out the messages during ssr in my example I get this:

[serve:app] messages {
[serve:app]   'en-us': {
[serve:app]     message: { type: 0, start: 0, end: 13, loc: [Object], body: [Object] },
[serve:app]     numberValue: { type: 0, start: 0, end: 3, loc: [Object], body: [Object] }
[serve:app]   },
[serve:app]   'es-la': {
[serve:app]     message: { type: 0, start: 0, end: 12, loc: [Object], body: [Object] },
[serve:app]     numberValue: { type: 0, start: 0, end: 3, loc: [Object], body: [Object] }
[serve:app]   }
[serve:app] }

[kevinwarne]

and my trivial i18n sfc block looks like this:

<i18n lang="json">
{
  "en-us": {
    "message": "Hello, world!",
    "numberValue": "123"
  },
  "es-la": {
    "message": "Hola, world!",
    "numberValue": "123"
  }
}
</i18n>

[phonezawphyo]

Same situation with SSG prerender using vite.

[giannisvrn]

hello, did you find a solution about this? i have the same problem

[jarkt]

I avoid using a <i18n> block in SSR. There is only one place in my codebase where I use it, but that's a special case where I intentionally use only CSR.