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. #789

noukaza · 2021-11-15T16:13:51Z

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

The text was updated successfully, but these errors were encountered:

kazupon · 2021-11-16T09:50:48Z

Thank you for your reporting!

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.

The meaning of this warning message is that you need to specify the flag explicitly in the bundler when you do a production build.

Please refer to the following link for packages provided by vue-i18n for bundlers.
https://vue-i18n.intlify.dev/installation.html#with-a-bundler

One advice to help you out is to use the plugins for each bundler listed in the NOTE section of the above link, and they will configure them properly for you. I recommend that you check them out.

Thanks!

ghost · 2022-04-28T13:18:47Z

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.

IbrahimSinann · 2022-04-29T11:33:04Z

Hello philipp-rudlof-sendcloud

I absolutely agree with your comment, would you please give more insight on what exactly has to be done and where?
I'm struggling with this issue a lot and it's very unclear to me (as a beginner) how to deal with it.

Best Regards

ghost · 2022-04-29T12:02:33Z

@IbrahimSinann In my case, I’m dealing with a Vue application that uses Vue 3 via Vue CLI (which means that under the hood, the project is built and bundled using Webpack).

In the documentation, the relevant section for updating the vue.config.js file in my project is found here: https://vue-i18n.intlify.dev/guide/advanced/sfc.html#vue-cli. I used these settings as is. My translation files happened to be stored in ./src/locales so I didn’t need to change that either. Running my build and serving the application now works with these settings, but I still get the warning as I haven’t figured out where exactly to configure those flags, so I’m afraid I can’t exactly answer your question.

IbrahimSinann · 2022-04-29T12:14:41Z

@philipp-rudloff-sendcloud

Thank you very much for your reply!

I have the same case, I'm doing a Vue application with Vue 3 and VueCLI, and I also have my translation files inside the ./src/locales folder, I can run my build and it works but I still get that warning, and also two other warnings per language that I add which are:

[intlify] Not found 'message' key in 'en' locale messages.

[intlify] Fall back to translate 'message' with root locale.

And in the end, the translations work as wanted, whenever I change the locale to the preferred language the translation gets executed but I get the two warnings above for every locale file that I add in the locales folder.

StepanMynarik · 2022-05-09T07:23:34Z

Same problem here, Vue.js 3, Vue CLI. Localization works, but I'm still getting this warning. No idea how to get rid of it.

lk77 · 2022-05-10T08:09:37Z

Same thing, i have this warning,

i've done that :

new webpack.DefinePlugin({
    '__VUE_I18N_FULL_INSTALL__': JSON.stringify(true),
    '__VUE_I18N_LEGACY_API__': JSON.stringify(true),
    '__INTLIFY_PROD_DEVTOOLS__': JSON.stringify(true)
})

but i don't like it at all, i should not have to do that, global flags like that should be avoided at all cost

hemengke1997 · 2022-05-26T06:37:46Z

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

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

leozengtao · 2022-05-29T13:41:55Z

With Vite

Install @intlify/vite-plugin-vue-i18n
Configure it in vite.config.js or vite.config.ts

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

export default defineConfig({
  // ...
  alias: {
    'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
  },
  plugins: [
    vue(),
    vueI18n({
      include: path.resolve(__dirname, './path/to/src/locales/**')
    })
  ],
  // ...
})

https://vue-i18n.intlify.dev/guide/advanced/optimization.html
The above link provides additional information.

splanard · 2022-06-22T22:36:37Z

I'm having the same issue using Vue3 + vue-cli (webpack under the hood). I'd like to find a way to make this warning go away.

pegiadise · 2022-06-23T10:41:35Z

  chainWebpack: (config) => {
    // set environment variables
    config.plugin('define').tap((definitions) => {
      Object.assign(definitions[0], {
        // ... rest of your injected vars here
        // get rid of vue-i18n warning
        __VUE_I18N_FULL_INSTALL__: JSON.stringify(true),
        __INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false),
        __VUE_I18N_LEGACY_API__: JSON.stringify(false),
      })

      return definitions
    })
  },

This should work for vue-cli with webpack.

sajjadalis · 2022-07-05T02:49:46Z

With Vite

Install @intlify/vite-plugin-vue-i18n
Configure it in vite.config.js or vite.config.ts

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

export default defineConfig({
  // ...
  alias: {
    'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
  },
  plugins: [
    vue(),
    vueI18n({
      include: path.resolve(__dirname, './path/to/src/locales/**')
    })
  ],
  // ...
})

https://vue-i18n.intlify.dev/guide/advanced/optimization.html The above link provides additional information.

Tried this. Still can't get rid of the warning. Guess it's too much for newbies with vue-i18n.

fxcjahid · 2022-08-13T07:49:08Z

I have solved this using @intlify/vite-plugin-vue-i18n

step 1: install @intlify/vite-plugin-vue-i18n plugin
npm
npm i --save-dev @intlify/vite-plugin-vue-i18n

yarn
yarn add -D @intlify/vite-plugin-vue-i18n

step 2: goto vite.config.js

import { defineConfig } from 'vite'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'url'
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

export default defineConfig({
  plugins: [
    vue(), // you need to install `@vitejs/plugin-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: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
    })
  ]
})

Source: https://www.npmjs.com/package/@intlify/vite-plugin-vue-i18n?activeTab=readme

sefo · 2022-08-29T09:29:58Z

Why? Why does it have to be so convoluted and undocumented?
Need another plugin with a specific config? Just to remove a warning? Why?

Anyway, all the above didn't work. Had to change the import like so:

import * as path from 'path';
...
include: path.resolve(__dirname, './path/to/i18n/**')

Next project I'll just ditch Vue. It's a huge pain to migrate to v3. Just because they want to look more like react...

lk77 · 2022-08-30T08:49:45Z

This is vue-i18n, it's not vue itself

shoftee · 2022-09-01T01:07:25Z

  chainWebpack: (config) => {
    // set environment variables
    config.plugin('define').tap((definitions) => {
      Object.assign(definitions[0], {
        // ... rest of your injected vars here
        // get rid of vue-i18 warning
        __VUE_I18N_FULL_INSTALL__: JSON.stringify(true),
        __INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false),
        __VUE_I18N_LEGACY_API__: JSON.stringify(false),
      })

      return definitions
    })
  },

This should work for vue-cli with webpack.

This worked for getting rid of the warning, thank you!

9/10 because you wrote vue-i18 without the n in the comment

Michael1337 · 2022-10-20T12:57:29Z

in vite.config.ts, you can resolve the problem like:
resolve: {
  alias: [
    {
      find: 'vue-i18n',
      replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
    }
  ]
}

It might look like this:

  alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
  }

otj-itf · 2022-10-24T09:26:46Z

None of the above works for me using ts and composition api...

velly · 2022-11-25T02:51:17Z

include: path.resolve(__dirname, './path/to/src/locales/**')

I fixed the warnings with this solution!
Vite+Vue3,Composable API

rostik32 · 2022-12-04T11:49:14Z

why do I have to install the plugin to remove the message from the console? Terrible!

Esensats · 2022-12-18T11:58:55Z

With the release of Vite 4 the package @intlify/vite-plugin-vue-i18n became deprecated. Instead you should now use @intlify/unplugin-vue-i18n

First uninstall the old package if you have it then install the new one:
npm install @intlify/unplugin-vue-i18n

Then your vite.config.js should look kinda like this:

import { defineConfig } from 'vite'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import path from 'path'

export default defineConfig({
  base: './',
  resolve: {
    alias: {
      // ...
      'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js',
    },
  },
  plugins: [
    // ...
    VueI18nPlugin({
      include: path.resolve(__dirname, './src/i18n/**'), // PUT YOUR OWN PATH TO LOCALES HERE
    }),
  ],
})

mcrapts · 2022-12-22T15:43:14Z

Adding the following alias was enough for me to fix this warning with Nuxt 3:

alias: {
  'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
}

I agree the error is unhelpful and the documentation is lacking on this part.

daidaibg · 2023-01-06T02:49:08Z

在 vite.config.ts 中，你可以这样解决问题：
resolve: {
  alias: [
    {
      find: 'vue-i18n',
      replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
    }
  ]
}

它可能看起来像这样：

  alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
  }

这个解决了我的提示

ZakareyaAlatoli · 2023-02-27T17:30:17Z

I am getting this warning as well. I am using the Vue CLI to build the project. What should I put in my vue.config.js to get rid of this?

rezelute · 2023-06-20T21:51:44Z

I just get the following error when setting:

resolve: {
         alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
            "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
         },
      },

SHrebeniuk · 2023-07-13T16:13:10Z

@mcrapts can you give any example or what you also add to nuxt 3
because after adding

    resolve: {
      alias: {
        'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
      }
    },

i have error

Failed to load url vue-i18n/dist/vue-i18n.runtime.esm-bundler.js/dist/vue-i18n.esm-bundler.js

SHrebeniuk · 2023-07-26T11:45:04Z

on Nuxt 3 with Vite just add this and warning will disappear

vite: {
    define: {
      __VUE_I18N_FULL_INSTALL__: true,
      __VUE_I18N_LEGACY_API__: false,
      __INTLIFY_PROD_DEVTOOLS__: false
    }
}

mcrapts · 2023-07-26T11:47:51Z

@mcrapts can you give any example or what you also add to nuxt 3 because after adding
    resolve: {
      alias: {
        'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
      }
    },
i have error
Failed to load url vue-i18n/dist/vue-i18n.runtime.esm-bundler.js/dist/vue-i18n.esm-bundler.js

I'm using this plugin: intlify/unplugin-vue-i18n

This is my configuration:
nuxt.config.ts:

vite: {
    plugins: [
      VueI18nVitePlugin({
        include: [resolve(dirname(fileURLToPath(import.meta.url)), './locales/*.json')],
      }),
    ],
  },

plugins/i18n.ts:

import { createI18n } from 'vue-i18n'
import en from '@/locales/en.json'
import nl from '@/locales/nl.json'

export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    locale: 'nl',
    fallbackLocale: 'nl',
    messages: { en, nl },
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
    datetimeFormats: {
      nl: {
        long: {
          dateStyle: 'full',
          timeStyle: 'short',
        },
      },
      en: {
        long: {
          dateStyle: 'full',
          timeStyle: 'short',
          hour12: false
        },
      },
    },
  })
  vueApp.use(i18n)
})

anonimusprogramus · 2023-08-08T01:36:28Z

I just get the following error when setting:

resolve: {
         alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
            "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
         },
      },

coming from future, I confirm this one line works 👌

thanks!

bapman81 · 2024-01-16T13:35:34Z

On Vue3 + Vite, it disappeared when I updated vue-i18n from 9.2.2 to 9.9.0.

noukaza added the Status: Review Needed Request for review comments label Nov 15, 2021

kazupon closed this as completed Nov 16, 2021

pbrzosko mentioned this issue Nov 24, 2021

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. #810

Closed

4 tasks

mirumirumi mentioned this issue Jan 22, 2022

vue-i18n warning - prd build mirumirumi/how-far-can-i-go#5

Open

AprildreamMI added a commit to AprildreamMI/automa that referenced this issue Dec 21, 2022

fix: fix vuei18n warning intlify/vue-i18n-next#789 (comment)

3194b48

AprildreamMI mentioned this issue Dec 21, 2022

fix: fix vue-i18n warning AutomaApp/automa#1029

Merged

linspw mentioned this issue Nov 15, 2023

NUXT 3 | VERCEL | PRODUCTION BUILD : ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined vue-email/vue-email#102

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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. #789

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. #789

noukaza commented Nov 15, 2021

kazupon commented Nov 16, 2021

ghost commented Apr 28, 2022

IbrahimSinann commented Apr 29, 2022

ghost commented Apr 29, 2022

IbrahimSinann commented Apr 29, 2022

StepanMynarik commented May 9, 2022

lk77 commented May 10, 2022 •

edited

hemengke1997 commented May 26, 2022

leozengtao commented May 29, 2022 •

edited

splanard commented Jun 22, 2022

pegiadise commented Jun 23, 2022 •

edited

sajjadalis commented Jul 5, 2022 •

edited

fxcjahid commented Aug 13, 2022 •

edited

sefo commented Aug 29, 2022 •

edited

lk77 commented Aug 30, 2022

shoftee commented Sep 1, 2022

Michael1337 commented Oct 20, 2022

otj-itf commented Oct 24, 2022

velly commented Nov 25, 2022 •

edited

rostik32 commented Dec 4, 2022

Esensats commented Dec 18, 2022 •

edited

mcrapts commented Dec 22, 2022

daidaibg commented Jan 6, 2023

ZakareyaAlatoli commented Feb 27, 2023

rezelute commented Jun 20, 2023

SHrebeniuk commented Jul 13, 2023

SHrebeniuk commented Jul 26, 2023

mcrapts commented Jul 26, 2023 •

edited

anonimusprogramus commented Aug 8, 2023

bapman81 commented Jan 16, 2024

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. #789

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. #789

Comments

noukaza commented Nov 15, 2021

Reporting a bug?

Expected behavior

Reproduction

System Info

Screenshot

Additional context

Validations

kazupon commented Nov 16, 2021

ghost commented Apr 28, 2022

IbrahimSinann commented Apr 29, 2022

ghost commented Apr 29, 2022

IbrahimSinann commented Apr 29, 2022

StepanMynarik commented May 9, 2022

lk77 commented May 10, 2022 • edited

hemengke1997 commented May 26, 2022

leozengtao commented May 29, 2022 • edited

splanard commented Jun 22, 2022

pegiadise commented Jun 23, 2022 • edited

sajjadalis commented Jul 5, 2022 • edited

fxcjahid commented Aug 13, 2022 • edited

sefo commented Aug 29, 2022 • edited

lk77 commented Aug 30, 2022

shoftee commented Sep 1, 2022

Michael1337 commented Oct 20, 2022

otj-itf commented Oct 24, 2022

velly commented Nov 25, 2022 • edited

rostik32 commented Dec 4, 2022

Esensats commented Dec 18, 2022 • edited

mcrapts commented Dec 22, 2022

daidaibg commented Jan 6, 2023

ZakareyaAlatoli commented Feb 27, 2023

rezelute commented Jun 20, 2023

SHrebeniuk commented Jul 13, 2023

SHrebeniuk commented Jul 26, 2023

mcrapts commented Jul 26, 2023 • edited

anonimusprogramus commented Aug 8, 2023

bapman81 commented Jan 16, 2024

lk77 commented May 10, 2022 •

edited

leozengtao commented May 29, 2022 •

edited

pegiadise commented Jun 23, 2022 •

edited

sajjadalis commented Jul 5, 2022 •

edited

fxcjahid commented Aug 13, 2022 •

edited

sefo commented Aug 29, 2022 •

edited

velly commented Nov 25, 2022 •

edited

Esensats commented Dec 18, 2022 •

edited

mcrapts commented Jul 26, 2023 •

edited