38

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

10 Answers 10

47

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

import { createI18n } from 'vue-i18n/index'
11
  • 3
    it works in quasar. just fix the import in boot/i18n.js Commented Sep 15, 2021 at 20:40
  • 3
    @KrushnDayshmookh In my Quasar project changing import { createI18n } from 'vue-i18n'; to import { createI18n } from 'vue-i18n/index' triggers an error unless I rename the i18n.ts boot file to i18n.js. Commented Oct 20, 2021 at 19:30
  • 13
    This answer didn't help me. I'm getting an error message. Using Vue 3 Commented Oct 24, 2021 at 9:46
  • @halfpastfour.am try updating your packages with quasar upgrade. if the error still persists, please share the error log Commented Oct 27, 2021 at 7:26
  • When upgraded to the latest quaser , in src-capacitor show same warning W/Capacitor/Console: File: http://192.168.0.104:8080/vendor.js - Line 145335 - Msg: 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.
    – Baryon Lee
    Commented Nov 20, 2021 at 8:34
45

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,
    },
    // ...
});
5
  • 3
    I added this, but the message does not go away Commented Mar 3, 2022 at 17:51
  • @GeeWhizBang are you getting this in the context of vite? Or are you using for example also storybook?
    – Andrei L
    Commented Mar 21, 2022 at 22:21
  • I also had to update to the 9.2.0 beta version to get rid of the message. Commented Apr 13, 2022 at 14:25
  • 1
    Just logged back in to drop an upvote on this. Excellent pointer.
    – Mark Ernst
    Commented May 6, 2022 at 8:31
  • 2
    I had to use __VUE_I18N_LEGACY_API__: true for this.$i18n to work.
    – h2ooooooo
    Commented May 6, 2022 at 11:13
7

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.

2
  • 1
    Thanks! That worked for for my setup. I am using: vite: 4.2.0 vue: 3.2.47 vue-i18n: 9.2.2
    – Manfred
    Commented Jun 16, 2023 at 22:06
  • Worked for me. The old solution 'vue-i18n/index' used to work in older verions, but now it just causes an error. Going to paste the error to help people googling it find this updated solution: Module not found: Error: Package path ./index is not exported from package node_modules/vue-i18n (see exports field in node_modules/vue-i18n/package.json)
    – Lemmings19
    Commented Aug 11, 2023 at 8:44
6

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

2
  • I took a look at the code behind, it's basically triggered if typeof true === "boolean", how can that be false? No wonder it's bugged. Commented Mar 19, 2022 at 6:51
  • 6
    I confirm : npm install vue-i18n@next fix this bug
    – Yukulélé
    Commented Apr 13, 2022 at 13:13
6

vite.config.ts

alias: {
    'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
},
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');
4

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')
  }**
})
3

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,
        },
    }
})
1
  • 1
    This is the right answer for Nuxt 3 latest version. Commented Nov 1, 2022 at 20:35
0

I had [email protected]. 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.

-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.