How to configure vue.config.js to remove vue-i18n console error when using nm run serve

I am very new to Vue and I am trying to set up vue-i18n and continue to get console warnings

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.

My process

$npm install vue-i18n@next
$npm i --save-dev @intlify/vue-i18n-loader@next

I have tried adding different things to my vue.config.js file based on various stack overflow answers including

module.exports = {
    chainWebpack: config =>
    {
        config.module
            .rule( 'i18n' )
            .resourceQuery( /blockType=i18n/ )
            .type( 'javascript/auto' )
            .use( 'i18n' )
            .loader( '@intlify/vue-i18n-loader' )
    }
}

and

const webpack = require('webpack');

module.exports = {
    configureWebpack:
    {
        plugins: [
            // Define Bundler Build Feature Flags
            new webpack.DefinePlugin( {
                __VUE_OPTIONS_API__: false,
                __VUE_I18N_FULL_INSTALL__: true,
                __VUE_I18N_LEGACY_API__: true,
                __VUE_I18N_PROD_DEVTOOLS__: false,
                __INTLIFY_PROD_DEVTOOLS__: false
            } ),
        ],
    }
};

When I use the 1st example vue.config.js the global values all log to the console with the correct values, but I still get the warning.

The only thing that seems to remove the error is modifying the i18n import.

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

However, this seems wrong because it just bypasses the file that generates the warning.

My question boils down too...

How can I configure vue-i18n to work with my vue3 project that uses

npm run serve

in a way that removes the console warning? or What are the exact steps to configure/use/add vue-i18n in my vue3 project.

package.json

{
  "name": "octo-train-client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@mdi/font": "^6.4.95",
    "axios": "^0.24.0",
    "core-js": "^3.6.5",
    "dotenv-webpack": "^7.0.3",
    "form-data": "^4.0.0",
    "primeflex": "^2.0.0",
    "primeicons": "^4.1.0",
    "primevue": "^3.8.2",
    "vue": "^3.0.0",
    "vue-axios": "^3.4.0",
    "vue-i18n": "^9.0.0-rc.4",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@intlify/vue-i18n-loader": "^4.1.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "node-sass": "^4.12.0",
    "prettier": "^2.2.1",
    "sass-loader": "^8.0.2"
  }
}

Solution

I faced the same problem, and it seems it is normal IF you are on a dev mode.

https://github.com/intlify/vue-i18n-next/issues/810

You should not see that on a production level