Message compiler still ships with dist with runtime only
Lilja opened this issue · comments
Reporting a bug?
npx vite-bundle-visualizer:
The message compiler is still part of the build. Why?
Expected behavior
The message compiler should not be here, right?
Reproduction
pnpm create vite # typescript + vue
pnpm add vue-i18n@next
pnpm add @intlify/unplugin-vue-i18n
// vite.config.ts
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
import { dirname, resolve } from "node:path";
// https://vitejs.dev/config/
export default defineConfig({
define: {
// Optimize build for prod
"process.env.NODE_ENV": `"${process.env.NODE_ENV}"`,
__VUE_I18N_FULL_INSTALL__: false,
__VUE_I18N_LEGACY_API__: false,
__INTLIFY_PROD_DEVTOOLS__: false,
},
resolve: {
alias: {
"vue-i18n": "vue-i18n/dist/vue-i18n.runtime.esm-bundler.js",
},
},
plugins: [
vue(),
VueI18nPlugin({
// locale resource pre-compile option
include: resolve(
dirname(fileURLToPath(import.meta.url)),
"./frontend/locales/**",
),
fullInstall: false,
}),
],
});import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createI18n } from 'vue-i18n'
import { messages } from './translations.ts'
const i18n = createI18n({
locale: 'fr', // set locale
fallbackLocale: 'fr', // set fallback locale
legacy: false,
messages,
})
createApp(App).use(i18n).mount('#app')<script setup lang="ts">
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
</script>
<template>
<div class="greetings">
<h1 class="green">{{ t('hello') }}</h1>
<h3>
You’ve successfully created a project with
<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
</h3>
</div>
</template>System Info
$ npx envinfo --system --npmPackages '{vue*,@vue/*,vue-i18n*,@intlify/*,vite*,@vitejs/*}' --binaries --browsers
System:
OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
Memory: 8.95 GB / 15.59 GB
Container: Yes
Shell: 3.6.1 - /bin/fish
Binaries:
Node: 18.18.2 - ~/.local/share/nvm/v18.18.2/bin/node
Yarn: 1.22.4 - /mnt/c/Users/Erik Lilja/AppData/Roaming/npm/yarn
npm: 9.8.1 - ~/.local/share/nvm/v18.18.2/bin/npm
pnpm: 8.15.1 - /home/linuxbrew/.linuxbrew/bin/pnpm
npmPackages:
@intlify/unplugin-vue-i18n: ^3.0.1 => 3.0.1
@vitejs/plugin-vue: ^5.0.4 => 5.0.4
vite: ^5.1.4 => 5.1.5
vue: ^3.4.19 => 3.4.21
vue-i18n: ^9.9.0 => 9.9.0
vue-tsc: ^1.8.27 => 1.8.27
### Screenshot
_No response_
### Additional context
_No response_
### Validations
- [X] Read the [Contributing Guidelines](https://github.com/intlify/vue-i18n-next/blob/master/.github/CONTRIBUTING.md)
- [X] Read the [Documentation](https://vue-i18n.intlify.dev/)
- [X] Check that there isn't [already an issue](https://github.com/intlify/vue-i18n-next/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussions](https://github.com/intlify/vue-i18n-next/discussions)
Thank you for your feadback!
Would you be able to provide a reproduction 🙏
More info
Why do I need to provide a reproduction?
Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.
What will happen?
If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.
If Status: Need More Info labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.
How can I create a reproduction?
We have a couple of templates for starting with a minimal reproduction:
👉 Reproduction mininal starter
👉 Reproduction starter with unpluguin-vue-i18n
A public GitHub repository is also perfect. 👌
Please ensure that the reproduction is as minimal as possible.
You might also find these other articles interesting and/or helpful:
- Download locally(Top left there is a download button)
- Npm install
npx vite-bundle-visualizer
Thank you for your reproduction!
I've checked your reproduction
you need to configure vite.config.ts the below:
import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
import { dirname, resolve } from 'node:path';
// https://vitejs.dev/config/
export default defineConfig({
define: {
// Optimize build for prod
'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`,
// NOTE: you don't configure `resolve.alias`, because `@inlityf/unplugin-vue-i18n` will configure it internally
// __VUE_I18N_FULL_INSTALL__: false,
// __VUE_I18N_LEGACY_API__: false,
// __INTLIFY_PROD_DEVTOOLS__: false,
},
// NOTE: yon don't configure `resolve.alias`, because `@inlityf/unplugin-vue-i18n` will configure it internally
// resolve: {
// alias: {
// 'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js',
// },
// },
plugins: [
vue(),
VueI18nPlugin({
// locale resource pre-compile option
include: resolve(
dirname(fileURLToPath(import.meta.url)),
'./src/locales/**'
),
fullInstall: false,
dropMessageCompiler: true, // you need to set `true`
}),
],
});about dropMessageCompiler, see the here: https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#dropmessagecompiler
And you need to upgrade vue-i18n v9.3 or later.
Thanks!