You are running a development build of vue-i18n

[scambier]

Module versions (please complete the following information):

• vue: ^3.0.4
• vue-i18n: ^9.0.0

Hello, I can't get rid of the following warnings after building my app:

• You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
• You are running a development build of vue-i18n. Make sure to use the production build (*.prod.js) when deploying for production.

I'm using Vue 3 with Vite 2, and my locale files are in yaml (there is no . NODE_ENV is set to production. I heavily use $t() in single-page components, have some calls to useI18n(), but don't use the <i18n> block at all.

I tried using @intlify/vite-plugin-vue-i18n in my vite.config.ts, but without success.

import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

const config:= {
  plugins: [
    vue(),
    vueI18n({
      // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
      compositionOnly: false,

      // you need to set i18n resource including paths !
      include: path.resolve(__dirname, './src/locales/**')
    }),

It's quite certainly a comprehension problem on my part

[kazupon]

Thank you for your reporting! Could you provide minimal reproduction repository please? 🙏

[PeterAlfredLee]

Hi，@scambier, Do you mean you want to run in production mode and don't want to see warning in console ? Try set mode: 'production' in vite.config.ts file， like this:

export default defineConfig({
  mode: 'production',
  plugins: [
    vue(),
    vueI18n({
      include: path.resolve(__dirname, './src/locales/**')
    })
  ]
})

See also this vite document. This works for me. Hope it helps for you.

[kazupon]

maybe, related issue https://github.com/intlify/vue-i18n-next/issues/391

[scambier]

@PeterAlfredLee

Indeed, setting the mode to production solves the problem, but that's a bad fix (from what I understand).

@kazupon here's what I understand for Vite's mode:

When you call vite build --mode [modname], the [modname] could be literally anything, as long as it corresponds to an .env.[modname] file in my project.

This is explained here:

A typical example is you may want to have a "staging" mode where it should have production-like behavior, but with slightly different env variables from production.

Also, setting modname: 'production' in my vite.config.ts is useless because it'd be overwritten by the vite build --mode command. The mode is only relevant to Vite so that it knows what .env file to use to inject env vars during build. This shouldn't be relevant for modules like Vue-i18n

The value modules should look for to differentiate between production and development is NODE_ENV, and it looks that's what Vue-i18n does, at least in the the root's index.js.

I'll make a reproduction repo asap if it's still needed, thank you for your time

[kazupon]

@scambier Thank you for your more feedback!

I found that there is a bug in the feature flags setting. I'm going to fix it!

[kazupon]

This issue is vite-plugin-vue-i18n bug. I move to it.

[kazupon]

I've just fixed it! please check lastest version! https://github.com/intlify/vite-plugin-vue-i18n/releases/tag/v2.0.2

[scambier]

@kazupon Hello, I still have a message "You are running a development build of vue-i18n. Make sure to use the production build (*.prod.js) when deploying for production." unless I make a build in production mode.

To reproduce, simple build your app with vite build --mode somethingThatIsntProduction, even if the corresponding mode specifies NODE_ENV=production.

Like I said in this post, my comprehension is that the build mode name should be irrelevant, and the only value that should determine if a build is for production or not should be NODE_ENV. In my use-case, I make builds for a staging environment that has to be indistinguishable from production.

[kazupon]

@scambier Thank you for your reporting! This is a bug of vue-i18n and vite-plugin-vue-i18n. https://github.com/intlify/vite-plugin-vue-i18n/pull/80 https://github.com/intlify/vue-i18n-next/pull/404

We are going to release vue-i18n v9.1 soon. please wait the release publish. 🙏

[kazupon]

I released vue-i18n v9.1 ! latest version is v9.1.2

You can try it! :)

[scambier]

@kazupon There's still a warning.

You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

My locale files are .json.

vite.config.js:

const config: UserConfig = {
  plugins: [
    vue(),
    vueI18n({
      runtimeOnly: false,
      // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
      compositionOnly: false,

      // you need to set i18n resource including paths !
      include: resolve(__dirname, './src/locales/**')
    }),

NODE_ENV=production for the build

[kazupon]

Hmm, it's strange … 🤔 Your vite.config.js is also correct.

I checked at vue-i18n starter for vite. I could not reproduce it. https://github.com/intlify/vite-vue-i18n-starter

[Miguel-Bento-Github]

@kazupon I'm not sure if this helps but I also have this issue on a standard Vue project.

All I did in my project that was scaffolded by using @vue/cli Steps:

• Run vue create app-name
• Use manual setup
• Choose vue 3

After the installation run

• vue add i18n

Locales folder doesn't work and I get that in my console.

[Miguel-Bento-Github]

In vue.config.js the localeDir is set to 'locales', my solution here was to change that with '@/locales/'

# vue.config.js
...
pluginOptions: {
    i18n: {
      locale: "en",
      fallbackLocale: "en",
      **localeDir: "@/locales",**
      enableLegacy: true,
      runtimeOnly: false,
      fullInstall: true,
    },
  },

The esm-bundler warning persists.