Vue-i18n: Uncaught TypeError: Cannot read property 'config' of undefined

Created on 9 May 2017 · 16Comments · Source: kazupon/vue-i18n

Hi,

I have just copy the basic example in the Getting Started section. But I get this error message each time from this file : vue-i18n.esm.js

vue & vue-i18n version

2.1.10, 6.1.1

Basic code

import VueI18n from 'vue-i18n';
import Locales from './vue-i18n-locales.generated.js';


const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

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

Get this error message from this function

And each time I got the same error message for this code part

VueI18n.prototype._initVM = function _initVM (data) {
  var silent = Vue.config.silent;
  Vue.config.silent = true;
  this._vm = new Vue({ data: data });
  Vue.config.silent = silent;
};

Any idea ? Thanks for your help.

Source

gmarineau

👍22

Most helpful comment

Hi @gmarineau
you have to do ".use" before create i18n instance:

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import Locales from './vue-i18n-locales.generated.js';

// here
Vue.use(VueI18n)

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

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

dbalas on 11 May 2017

👍114 🎉26 ❤22 😄16

All 16 comments

Thank you for your feedback!
Could you provide a minimum reproruduce code with JSFiddle or JSBin or other please?

kazupon on 9 May 2017

😕2

Hi,

I just make another test on JSFiddle everything work fine. I will just check my config because I work with laravel-elixir-vue-2 and maybe the problem came from here.

gmarineau on 9 May 2017

Hi @gmarineau
you have to do ".use" before create i18n instance:

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import Locales from './vue-i18n-locales.generated.js';

// here
Vue.use(VueI18n)

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

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

dbalas on 11 May 2017

👍114 🎉26 ❤22 😄16

@dbalas OK thanks. I will make a test and give you a feedback.

gmarineau on 11 May 2017

👍2

hello all, I still cant make it work :(

"vue": "^2.3.3", "vue-i18n": "^6.1.3"

`window.VueI18n = require(\'vue-i18n\');

window.Locales = require('./vue-i18n-locales.generated.js');

Vue.use(VueI18n);

const i18n = new VueI18n({
locale: 'it',
messages: Locales
});`

TypeError: VueI18n is not a constructor[Learn More]

cpatti97100 on 29 May 2017

Close (in-activity)

kazupon on 12 Jun 2017

👎10

Ho god thank, i lost 2 hours on this issue -_-"

andrelec1 on 14 Nov 2017

👍7 😄2

I still have this problem in 7.7.0 if I try to put this configuration in an isolated file, since I have to call Vue.use (VueI18n) in this configuration file and also in my entry file (application.js). That's where the problem comes from:

If I do not call Vue.use(VueI18n) again on my application.js, it triggers the following error:

Property or method "$t" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. [...]

If I call Vue.use(VueI18n) again on my application.js, it triggers the following warning:

[vue-i18n] already installed.

Property or method "$t" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. [...]

alexandremagro on 30 May 2018

I was getting the same error. I had this

Vue.use(Framework7Vue, Framework7, VueI18n);

then I changed it so that VueI18n is used separately and now it works..

Vue.use(Framework7Vue, Framework7);
Vue.use(VueI18n);

manish2535 on 19 Jun 2018

👍2

Get the same issue while trying to export i18n object into main file
not work
`
import {i18n} from './i18n';

new Vue({
router: createRouter(),
i18n,
components: {
'navbar': navbarComponent
},
}).$mount('#app-main');`

pspuarduino on 14 Sep 2018

I'm facing with the same issue. My code: https://pastebin.com/gCxHqjAd

Vue version: ^2.5.2
VueI18n version: ^8.1.0

sayhicoelho on 28 Sep 2018

Having the same issue.

    "vue": "^2.5.0",
    "vue-i18n": "^8.5.0",

The issue can be tracked down to

VueI18n.prototype._initVM = function _initVM (data) {
  var silent = Vue.config.silent;
  Vue.config.silent = true;
  this._vm = new Vue({ data: data });
  Vue.config.silent = silent;
};

Where Vue is apparently undefined?

Just installed it into the basic setup provided by Vue-cli 3, same code as shown by @dbalas.

@kazupon

CrixuAMG on 20 Dec 2018

I fixed it by moving my imports from a different file (which also uses Vue to use Vue.use(VueI18n);).
This resolved the error on my application.

CrixuAMG on 20 Dec 2018

im using nuxt 2.8.1 with i18n 8.15.0 - got the same error

jjhesk on 19 Oct 2019

@kazupon I need to use VueI18n without installation (e.g., Vue.use(VueI18n)). How can I achieve it?

georgyfarniev on 22 Oct 2019

👍3

The following variable names are only used to explain the issue and how to solve it

import Vue from 'vue'
import VueI18n from 'vue-i18n'

// Adds imported VueI18n functionality to Vue
Vue.use(VueI18n)

// Creates an instance of VueI18n that must be inserted into the vue object creation
var languagesData = { en: { 'testmsg': 'This is a test msg!' } }
var i18nInstance = new VueI18n({
    locale: 'en',
    fallbackLocale: 'en',
    messages: languagesData 
})

// Vue object instance creation
var vue = new Vue({
    render: h => h(App),
    i18nInstance,
})

// Then you can display it {{ $t('testmsg') }}