SyntaxError: Unexpected return type in composer

[lubuger]

Reporting a bug?

ussing t function in composition API returns error.
tm(summer):
{ "type": 0, "start": 0, "end": 6, "loc": { "start": { "line": 1, "column": 1, "offset": 0 }, "end": { "line": 1, "column": 7, "offset": 6 }, "source": "Summer" }, "body": { "type": 2, "start": 0, "end": 6, "loc": { "start": { "line": 1, "column": 1, "offset": 0 }, "end": { "line": 1, "column": 7, "offset": 6 } }, "items": [ { "type": 3, "start": 0, "end": 6, "loc": { "start": { "line": 1, "column": 1, "offset": 0 }, "end": { "line": 1, "column": 7, "offset": 6 } } } ], "static": "Summer" } }

te('summer')
true

t('summer')
SyntaxError: Unexpected return type in composer

Expected behavior

function t should work

Reproduction

vite.config.js

VueI18nPlugin({
        include: resolve(dirname(fileURLToPath(import.meta.url)), './resources/js/locales/**'),
}),

app.js

const i18n = createI18n({
    legacy: false,
    locale: 'en',
    messages
});

Show.vue

<script setup>
import { useI18n } from 'vue-i18n';

const { t, tm, te } = useI18n();
</script>

<template>
{{ tm(`summer`) }}
{{ te('summer') }}
<p>{{ t('summer') }}</p>
</template>

Issue Package

vite-plugin-vue-i18n

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (4) x64
    Memory: 1.69 GB / 3.81 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 18.19.1 - /usr/bin/node
    npm: 9.2.0 - /usr/bin/npm
  Browsers:
    Chromium: 130.0.6723.69
  npmPackages:
    vite: ^5.4.10 => 5.4.10 
    vue: ^3.5.12 => 3.5.12 
    vue-i18n: ^9.14.1 => 9.14.1

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Read the README
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.

[kazupon]

Thank you for your reporting!

This repository has issue guidline.

Please provide a link to a repo that can reproduce the problem you ran into. A minimal reproduction is required (Why?). If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "Status: Need More Info" label. If no reproduction is provided after 5 days, it will be closed.

https://github.com/intlify/bundle-tools/blob/main/.github/ISSUE_TEMPLATE/bug-report.yml

Could you give a minimal reproduction, please ? 🙏

[SebastianFranze]

Hello @lubuger

We had the same problem migrating our application to vue-i18n composition mode together with @intlify/unplugin-vue-i18n.

It seems like there is some incompatibility between [email protected]+ and @intlify/[email protected]. As you can see, your return value from t is an AST-object. While the unplugin precompiles your messages to AST objects, the JIT compilation in vue-i18n is disabled by default (or maybe the other way around 😅).

The easiest solution is to update vue-i18n to 10.x. If this is not possible here is a guide to activate JIT compilation for different bundlers:

https://vue-i18n.intlify.dev/guide/advanced/optimization#jit-compilation

I hope I could help you with this. 👋

@kazupon IMO the documentation is not clear that the __INTLIFY_JIT_COMPILATION__ feature flag must be activated when using the unplugin together with [email protected]+