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

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