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

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".

vue.jsionic-frameworkvue-i18n


Solution 1:[1]

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

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

Solution 2:[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,
    },
    // ...
});

Solution 3:[3]

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

Solution 4:[4]

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');

Solution 5:[5]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 KK Liu
Solution 2 iamandrewluca
Solution 3 Nifel
Solution 4 Serkan KONAKCI
Solution 5 Maurici Abad

Related Questions