Vite 4 - Vue i18n Interpolation and Pluralization stopped working in production

[parafeu]

Reporting a bug?

After migrating from @intlify/vite-plugin-vue-i18n to @intlify/unplugin-vue-i18n , all pluralization and interpolation stopped working in production

Expected behavior

Messages should render like this (working in developpement)

In production, it looks like this

Reproduction

Using Vite 4.0.1 and @intlify/unplugin-vue-i18n 0.8.1.

vue 3.2.45 vue-i18n 9.2.2 typescript 4.9.4

Plugin configuration :

VueI18nPlugin({
  globalSFCScope: true
})

Here is some messages not working :

"date": "Date | Dates" "from_to": "Du {from} au {to}"

Usage in component

<template>
  <div v-if="event">
    {{ t("from_to_time", {
      from: dayjs(event.start).format("H:mm"),
      to: dayjs(event.end).format("H:mm"),
    }) }}
  </div>
</template>

<script setup lang="ts">
const { t } = useI18n();

interface Props {
  event?: {
    start:  string;
    stop: string;
  }
}
defineProps<Props>();
</script>

Issue Package

unplugin-vue-i18n

System Info

System:
    OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 22.28 GB / 24.93 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.13.1 - /usr/bin/node
    Yarn: 1.22.18 - /mnt/c/Users/AlexandreMUHL/AppData/Roaming/npm/yarn
    npm: 8.1.2 - /usr/bin/npm
  npmPackages:
    vite: ^4.0.1 => 4.0.1 
    vue: ^3.2.45 => 3.2.45 
    vue-i18n: ^9.2.2 => 9.2.2

Screenshot

No response

Additional context

No response

Validations

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

[kazupon]

Thank you for your reporting!

Unfortunately, I could not reproduce with your reporting. 😞 We need minimal reproduction repo via github, or stackbliz. Could you give it to us please ? 🙏

[parafeu]

Hey ! Thanks for your answer. Here is a minimal reproduction repo I just created. https://github.com/parafeu/reproduction-unplugin-i18n

[kazupon]

Thank you for your repo!

I realized that locale resources doesn’t set up on it. You need to configure src/lang into include option at vite.config.ts:

 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import path from "path";
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
+import { fileURLToPath } from "url";

+const __dirname = fileURLToPath(new URL(".", import.meta.url))

 export default defineConfig({
   resolve: {
     alias: {
       "@src/": `${path.resolve(__dirname, "src")}/`
     }
   },
   plugins: [
     vue(),
     VueI18nPlugin({
       globalSFCScope: true,
+      include: [path.resolve(__dirname, "src/lang/**")]
     })
   ]
 });

[kazupon]

If the above settings do not solve your issue, please let us know in this comment. Thanks!

[cexbrayat]

@kazupon I stumbled on this myself while migrating to @intlify/unplugin-vue-i18n

It was not necessary to specify include while using Vite 3 and @intlify/vite-plugin-vue-i18n. Is it expected that we now have to specify it?

[kazupon]

@cexbrayat Sorry, late my reply.

It was not necessary to specify include while using Vite 3 and @intlify/vite-plugin-vue-i18n. Is it expected that we now have to specify it?

That is required if resources such as json or yaml are read from external sources. If you would use only SFC's i18n custom block, it is not required.