Cannot read property 'config' of undefined

[dunz]

I used before version 8.12.0 today, I update new version 8.15.1 I use vue-i18n-loader 0.4.1

this error in browser

Uncaught (in promise) TypeError: Cannot read property 'config' of undefined
    at VueI18n._initVM (vue-i18n.esm.js?d8f9:1183)
    at new VueI18n (vue-i18n.esm.js?d8f9:1122)

in this code

VueI18n.prototype._initVM = function _initVM (data) {
    var silent = Vue.config.silent;  // excuted error at this line, Vue is `undefined`
    Vue.config.silent = true;
    this._vm = new Vue({ data: data });
    Vue.config.silent = silent;
  };

how reolve this problem?

[kazupon]

Thanks for filing the issue!

Please follow the Issue Reporting Guidelines and provide a minimal JSFiddle or JSBin or CodeSandbox containing a set of reproducible steps that can lead to the behavior you described.

[ssikoron]

I had the same issue - turned out I forgot to call Vue.use(VueI18n) before creating the i18n instance.

Here's the code which works for me with 8.15.1:

import Vue from "vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: "en",
  { ... }
});

new Vue({
  i18n,
  router,
  store,
  render: h => h(App)
}).$mount("#app");

[jbnv]

Why is the instance dependent on the Vue variable? I'm trying to use a local instance of VueI18n to do translations within only one particular module. Shoehorning everything into a global instance of VueI18n is a major problem for my project.

[johannesss]

Why is the instance dependent on the Vue variable? I'm trying to use a local instance of VueI18n to do translations within only one particular module. Shoehorning everything into a global instance of VueI18n is a major problem for my project.

I'm also facing this issue. I have an admin dashboard with an editor for a custom webcomponent that both needs their own instance of vue-i18n. I've solved it temporarily by messing with provide/inject, but it feels really dirty.

[itchwoot]

To enable component based i18n that doesn't break my unit tests, I had to resort to this:

import VueI18n from 'vue-i18n';

export default {
    i18n: (typeof Vue === 'undefined') ? null : new VueI18n(), // >_<
    name: 'MyComponent',
    props: {
        locale: {
            type: String,
            default: 'en',
        },
    },
    created() {
        if (this.$i18n) {
          // load and set locale and messages via axios
          // this.$i18n.locale = this.locale;
          // this.$i18n.setLocaleMessage(...);
        }
    },
};