intlify/vue-i18n

Message compiler still ships with dist with runtime only

Lilja opened this issue · 3 comments

Lilja commented

Reporting a bug?

npx vite-bundle-visualizer:

image

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)
github-actions commented

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:

Lilja commented

Code for repro

  • Download locally(Top left there is a download button)
  • Npm install
  • npx vite-bundle-visualizer
kazupon commented

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!

  • 👀1