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.

Reporting a bug?

I have created an app with vue 3.2 and added vue-i18n. and i get the following warning in the browser console:

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.

Expected behavior

no warning on the console

Reproduction

vue create vue-app

yarn add vue-i18n@next

in my main.ts

import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'
import i18n from "@/locales/i18n-config";

createApp(App)
    .use(i18n)
    .use(store)
    .use(router)
    .mount('#app')

in the @/locales/i18n-config file

import { createI18n } from 'vue-i18n'
import en from "@/locales/dictionary/en";
import fr from "@/locales/dictionary/fr";

const i18n = createI18n({
    locale: 'en', // set locale
    fallbackLocale: 'en', // set fallback locale
    messages: { en, fr }, // set locale messages
})

export default i18n

System Info

System:
    OS: macOS 12.0.1
    CPU: (8) x64 Apple M1
    Memory: 142.69 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.1.3 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 95.1.31.91
    Chrome: 95.0.4638.69
    Firefox Developer Edition: 92.0
    Safari: 15.1
  npmPackages:
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.15
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.15
    @vue/cli-plugin-router: ~4.5.0 => 4.5.15
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.15
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.15
    @vue/cli-service: ~4.5.0 => 4.5.15
    @vue/compiler-sfc: ^3.0.0 => 3.2.21
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0
    vue: ~3.2 => 3.2.21
    vue-apollo: ^3.0.8 => 3.0.8
    vue-class-component: ^8.0.0-0 => 8.0.0-rc.1
    vue-i18n: ^9.2.0-beta.17 => 9.2.0-beta.18
    vue-router: ~4.0 => 4.0.12
    vuex: ~4.0 => 4.0.2

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• 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

[hemengke1997]

in vite.config.ts, you can resolve the problem like:

resolve: {
  alias: [
    {
      find: 'vue-i18n',
      replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
    }
  ]
}

[ghost]

The warning message still doesn’t make sense to me.

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.

What feature flags is it referring to? The documentation at https://vue-i18n.intlify.dev/installation.html#from-cdn-or-without-a-bundler doesn’t explain anything about feature flags nor does it explain how one sets up vue-i18n when using a bundler. That information is then available at https://github.com/intlify/bundle-tools/tree/main/packages/vue-i18n-loader, but that’s not telling me how that can be done using Vue CLI. That in turn is documented at https://vue-i18n.intlify.dev/guide/advanced/sfc.html#vue-cli, but none of these pieces of documentation even mention feature flags.

So, what are these feature flags? I found https://vue-i18n.intlify.dev/guide/advanced/optimization.html#reduce-bundle-size-with-feature-build-flags after searching for it on the website. Now looking at them, I don’t want to change their defaults, so why should I configure them in the first place? Also, this page, again, doesn’t actually tell you how those flags are configured using Vue CLI.

Going back to the warning, I would really like the warning itself to link to https://vue-i18n.intlify.dev/guide/advanced/optimization.html#reduce-bundle-size-with-feature-build-flags directly and for that document to also include instructions on how to actually set these flags in the vue.config.js. It shouldn’t be necessary to jump through four pieces of documentation one by one to find the information one needs to finish a basic project setup.