You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with

Question

I have created an ionic app and added vue-i18n.

npx ionic start myapp tabs --type vue
npm install vue-i18n@next

I did the very first step of the VueI18n setup and added this to "./src/main.ts":

import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  locale: 'de',
  fallbackLocale: 'en',
  messages: {en: {testMessage: 'Test message'}, de: {testMessage: 'Testnachricht'}}
});

When looking at the result after npx ionic serve 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.

And I get this info in the browser console:

You are running a development build of vue-i18n. Make sure to use the production build (*.prod.js) when deploying for production.

When I comment out the snippet added to "./src/main.ts" both the notifications disappear. So they really seem to be caused by vue-i18n.

After asking Google I still don't know what to do about these notifications. What are they telling me? Should I do something about them? What can I do specifically?

These are the files that were automatically created in the root folder of the new project:

./ionic.config.json
./cypress.json
./jest.config.js
./babel.config.js
./.gitignore
./package-lock.json
./package.json
./.eslintrc.js
./tsconfig.json
./capacitor.config.json
./.browserslistrc

Please also tell me where I would need to change something. Also

$ find . -type f ! -name package-lock.json -maxdepth 1 -exec grep -iH webpack {} \;
./tsconfig.json:      "webpack-env",

so I will not know what to do if you tell me to "just set up webpack properly".

Answer 1

Now i am using this way to import the i18n, the warning is disapear

import { createI18n } from 'vue-i18n/index'

Answer 2

vue-i18n has instructions for every bundler how to set global feature flags so this warning will go away

https://vue-i18n.intlify.dev/guide/advanced/optimization.html#reduce-bundle-size-with-feature-build-flags

I'm using Vite, and I added this to vite.config.ts

import { defineConfig } from 'vite';

export default defineConfig({
    define: {
        __VUE_I18N_FULL_INSTALL__: true,
        __VUE_I18N_LEGACY_API__: false,
        __INTLIFY_PROD_DEVTOOLS__: false,
    },
    // ...
});

Answer 3

npm i vue-i18n

import { createI18n } from 'vue-i18n/dist/vue-i18n.cjs'

This works for me in Vue3.

My @vue/cli 5.0.3 version.

My vue-i18n version is 9.2.2.

Answer 4

This is a known bug apparently. They say it will be fixed in the 9.2 version.

See more info in this thread: https://github.com/intlify/vue-i18n-next/issues/391

Answer 5

vite.config.ts

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

Answer 6

I got the same warning in my console with the old package. Then I updated the project to "vue-i18n": "^9.2.0-beta.15" and it was fine.

First install vue-18n to latest package (^9.2.0-beta.15): npm i --save vue-i18n@next

Then: I created i18n.ts file on same path with main.ts

import { createI18n, LocaleMessages, LocaleMessageValue, VueMessageType } from 'vue-i18n';

/**
 * Load locale messages
 *
 * The loaded `JSON` locale messages is pre-compiled by `@intlify/vue-i18n-loader`, which is integrated into `vue-cli-plugin-i18n`.
 * See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
 */
function loadLocaleMessages(): LocaleMessages<Record<string, LocaleMessageValue<VueMessageType>>> {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
  const messages: LocaleMessages<Record<string, LocaleMessageValue<VueMessageType>>> = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key).default;
    }
  });
  return messages;
}

const setDateTimeFormats = {
  short: {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  },
  long: {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long',
    hour: 'numeric',
    minute: 'numeric',
  },
};

const dateTimeFormats = {
  en: setDateTimeFormats,
  es: setDateTimeFormats,
  de: setDateTimeFormats,
  'en-GB': setDateTimeFormats,
};

export default createI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'tr',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
  dateTimeFormats,
});

And my main.ts file:

import i18n from './i18n';
app.use(i18n).use(store).use(router).mount('body');

Answer 7

I'm using Vue-cli, after this solution I resolve the same problem, just try it! config in vue.config.js:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  **chainWebpack: config => {
    config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js')
  }**
})

Answer 8

Solution for Nuxt 3 ("nuxt": "3.0.0-rc.12") with Vite.
Just in case:
(You know that your Nuxt app use Vite, if you see "Vite client warmed up in ...ms" when starting server) About configuring build tools: https://v3.nuxtjs.org/migration/bundling/

yourApp/nuxt.config.ts :

 export default defineNuxtConfig({
    vite: {
        define: {
            __VUE_I18N_FULL_INSTALL__: true,
            __VUE_I18N_LEGACY_API__: false,
            __INTLIFY_PROD_DEVTOOLS__: false,
        },
    }
})

Answer 9

I had vue-i18n@9.1.6. This version has a bug. Of course we can update to 9.2.2 (the latest at the moment), but this need Vue 3.2+ to have effectScope. To use Vue 3.2 application need current Typescript version as well. So we stick to 9.1.10 and added some code to vue.config.js

module.exports = {
//...
   chainWebpack: (config) =>
    config.plugin("feature-flags").tap((args) => {
      args[0].__VUE_I18N_FULL_INSTALL__ = JSON.stringify(true);
      args[0].__VUE_I18N_LEGACY_API__ = JSON.stringify(false);
      return args;
   }),
};

These manipulations sorted warning in my case.

Answer 10

Update both vue-i18n and @intlify/vite-plugin-vue-i18n to the next version.

npm i vue-i18n@next
npm i --save-dev @intlify/vite-plugin-vue-i18n@next