How to suppress warning with __FEATURE_ESM_BUNDLER_WARN__ ?

[Unkrass]

This might not be a bug, but maybe a missing part of the docs. I am using Vue 3 with Vue CLI and a vue.config.js. I had no luck adding it to chainWebpack like this, so how do I configure that flag?

  chainWebpack: config => {
    config.plugin('define').tap(args => {
      args[0] = {
         ...args[0],
         __FEATURE_ESM_BUNDLER_WARN__: false
      }
      return args
   })
  },

Module versions

• "vue": "^3.0.0",
• "vue-i18n": "^9.0.0",

[Unkrass]

I added these flags instead:

__INTLIFY_PROD_DEVTOOLS__: false,
__VUE_I18N_FULL_INSTALL__: true,
__VUE_I18N_LEGACY_API__: true

Took me a while to understand I should just define those as Booleans, as the warning suggests.

[changweihua]

"vue-i18n": "^9.1.6",

something is different and it will always return needWarn with value 'true'

[Unkrass]

"vue-i18n": "^9.1.6",

something is different and it will always return needWarn with value 'true'

It won‘t return true if you configure the flags I mentioned in my above comment.

However you will still receive a standard console message (probably logged) that you are running a development build. I couldn‘t get rid of that

[gerbenvandekraats]

I tried to add the flags but i still get the warning. This is my vue.config.js:

const webpack = require('webpack');

module.exports = {
  pluginOptions: {
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableLegacy: false,
      runtimeOnly: false,
      compositionOnly: false,
      fullInstall: true
    }
  },
  configureWebpack: {
	plugins: [
		new webpack.DefinePlugin({
			__INTLIFY_PROD_DEVTOOLS__: false,
			__VUE_I18N_FULL_INSTALL__: true,
			__VUE_I18N_LEGACY_API__: true
		})
	]
  }
}

Can anybody help me out?

[Unkrass]

As far as I know you have to use chainWebpack to properly add it to the webpack config under the hood. Took me a little to figure this out, but this is part of my vue.config.js and it works in my project. Hope it helps:

const Dotenv = require('dotenv-webpack')

module.exports = {
  chainWebpack: config => {
    config.plugin('define').tap(args => {
      args[0] = {
         ...args[0],
         __INTLIFY_PROD_DEVTOOLS__: false,
         __VUE_I18N_FULL_INSTALL__: true,
         __VUE_I18N_LEGACY_API__: true
      }
      return args
   })
  },
  configureWebpack: {
    plugins: [
      new Dotenv()
    ]
  },
  devServer: {
    ......
  },
  pluginOptions: {
    ......
  }
}

[gerbenvandekraats]

@Unkrass Thank you so much for taking the time to reply to me (i used your config). I tried but unfortunately still no luck. How do you import i18n in your Vue files? My setup is this:

App.vue:
main.js:

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import i18n from './i18n'

createApp(App).use(i18n).use(store).use(router).mount('#app')

i18n.js:

import { createI18n } 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() {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  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
}

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

[Unkrass]

My setup is basically the same, except I have it all in my main.js (which I guess is what you meant instead of App.vue). Could you explain what exactly does not work? You also have to restart the app by executing yarn serve (or whatever you called your script) in your command line to make changes in vue.config.js work, since they are applied at build time, not at run time.

still here is my main.js:

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'
import router from './router'
import store from './store'

function loadLocaleMessages() {
  const locales = require.context(
    './locales',
    true,
    /[A-Za-z0-9-_,\s]+\.json$/i
  );
  const messages = {}
  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)
    }
  })
  return messages
}

const i18n = createI18n({
  fallbackLocale: 'en',
  locale: navigator.language.substring(0, 2),
  messages: loadLocaleMessages()
})

createApp(App)
  .use(store)
  .use(router)
  .use(i18n)
  .mount('#app')

The only difference I could find is a .default when your messages are set, but I don't think that makes a difference.

Also in my pluginOptions in vue.config.js where it says ...... in my above comment I use the following options. Shouldn't matter in my opinion, but you could try to compare if anything changes:

i18n: {
      enableInSFC: false,
      fallbackLocale: 'en',
      locale: 'de',
      localeDir: 'locales'
    }

[gerbenvandekraats]

I'm sorry, i indeed ment main.js instead of App.vue. The thing that is not working is that i still get the warning:
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.

I indeed restarted (npm run serve in my case). I don't get it. I have now copied exactly your code but I still get the warning.

package.json:

{
  "dependencies": {
    .....
    "vue": "^3.0.0",
    "vue-i18n": "^9.1.0",
    .....
  },
  "devDependencies": {
    "@intlify/vue-i18n-loader": "^2.1.0",
    "vue-cli-plugin-i18n": "~2.1.0"
    .....
  },
}

[Unkrass]

Okay, one more idea. I use the following packages, and none of the devDependencies you listed. Maybe you could try those:

"dependencies": {
    "vue": "^3.0.0",
    "vue-i18n": "^9.0.0",
    .....
  },
  "devDependencies": {
    "dotenv-webpack": "^7.0.2",
    .....
  }

Maybe the i18n CLI plugin interferes with the full installation. I'm just guessing though.

[Oleksii14]

@Unkrass I am receiving an error in the production build which uses the latest version of vue-i18n:

Uncaught ReferenceError: __INTLIFY_PROD_DEVTOOLS__ is not defined

[Oleksii14]

@Unkrass I have been importing vue-i18n incorrectly, now It's fixed!

[rstoenescu]

Hi,

I don't think this is fixed yet. Even if one sets all the necessary flags, on dev it will show the warning regardless, and this is because of the following:

// extract from dist/vue-i18n.esm-bundler.js

if ((process.env.NODE_ENV !== 'production') && typeof true === 'boolean') {
    // in dev, it'll always get in here so it will trigger the warning
    needWarn = true;
}

The part with typeof true === 'boolean' is because the vue-i18n build script always replaces __FEATURE_ESM_BUNDLER_WARN__ with true (in the source code). As displayed in the rollup.config.js (__FEATURE_ESM_BUNDLER_WARN__: true, ~line 238).