Vue-i18n - Cannot read property 'config' of undefined

Question

First of all I show you what works (in App.js)

import router from './routes.js'; 
import VueI18n from 'vue-i18n';

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  }
}

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})


const app = new Vue({
        el: '#app',
        router,
        i18n
});

But if I want to separate the code in lang.js

import VueI18n from 'vue-i18n';

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  }
}

export default new VueI18n({
   locale: 'en', // set locale
   messages, // set locale messages
});

So that I can write in App.js

import router from './routes.js'; 
import i18n from './lang.js'; 

const app = new Vue({
        el: '#app',
        router,
        i18n
});

But somehow this doesn't work even though routes.js is built exact the same.

My bootstrap.js looks like that, if it is important to know.

import Vue from 'vue';

window.Vue = Vue;

import VueRouter from 'vue-router';
import VueI18n from 'vue-i18n';

Vue.use(VueRouter);
Vue.use(VueI18n);

I'm sorry for the long code, but somehow the mistake lies in import i18n from './lang.js'; I get the message: Uncaught TypeError: Cannot read property 'config' of undefined

Answer 1

Just to add a detail, you MUST construct the new VueI18n after using Vue.use(VueI18n)

Vue.use(VueI18n);
// must be called after vue.use
const i18n = new VueI18n({
    locale: "en",
    fallbackLocale: "en",
    messages: {
        en
    }
});
new Vue({
    el: "#app",
    i18n,
    render: (h) => h(App),
});

Answer 2

In your main file where you create the app instance add the i18n as option instead of Vue.use(Vuei18n) like this:

new Vue({
  el: '#app',
  i18n,  // < --- HERE
  store,
  router,
  template: '<App/>',
  components: { App }
})

Put it just after el;

And this should be your lang:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './en'
import fr from './fr'
import ro from './ro'

Vue.use(VueI18n)

export default new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en, fr, ro
  }
})