Vue-i18n: 7.4.2 Cannot read property '_t' of undefined

[qiaochangwei]

[Vue warn]: Error in render: "TypeError: Cannot read property '_t' of undefined"

found in

---> <ISelect>
       <Test> at resources/assets/js/views/test.vue
         <Root>
TypeError: Cannot read property '_t' of undefined
    at VueComponent.<anonymous> (app.js:83551)
    at VueComponent.i18nHandler (app.js:53665)
    at VueComponent.t (app.js:53670)
    at VueComponent.t (app.js:49081)
    at VueComponent.boundFn [as t] (app.js:654)
    at VueComponent.localePlaceholder (app.js:51461)
    at Watcher.get (app.js:3577)
    at Watcher.evaluate (app.js:3684)
    at Proxy.computedGetter (app.js:3936)
    at Proxy.render (app.js:71068)

I've had the same problem. I have not used the '_t' property .I found that someone also met the same problem.
Here are some of my configurations
main.js

import iView from 'iview'
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
Vue.locale = () => {};
const messages = {
    zh: Object.assign(require('./lang/zh-cn'), zh),
    en: Object.assign(require('./lang/en-us'), en),
};

const i18n = new VueI18n({
    locale: 'zh', // set locale
    messages // set locale messages
});

const app = new Vue(Vue.util.extend({ router, store, i18n }, App)).$mount('#app');

test.vue

<template>
    <div>
        <Select v-model="global">
            <Option :value="item.id" :key="item.id" v-for="item in country">{{ item.name }}</Option>
        </Select>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                global:'',
                country:this.$t('country'), 
            }
        },
        methods: {
        },
        mounted() {
        },
    }
</script>

When I use iView's DatePicker and Select tags, it will happen

[jankulma]

I have the same problem.

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

Vue.use(VueI18n, {
    lang: 'en',
    Locales
});

[qiaochangwei]

The document has been omitted.

iview.i18n((key, value) => i18n.t(key, value))

add this code ,it will be ok

The complete example should be:

Vue.locale = () => {};
    const messages = {
        en: Object.assign({ message: 'hello' }, iview.langs['en-US']),
        zh: Object.assign({ message: '你好' }, iview.langs['zh-CN'])
    };

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

    iview.i18n((key, value) => i18n.t(key, value))

    new Vue({
        el: '#app',
        i18n: i18n,
        data: {
            visible: false,
            date: ''
        },
        methods: {
            show: function () {
                this.visible = true;
            }
        }
    })

[H3xx3n]

I also had this problem. I found that if you pass the i18n configuration in an extend it won't work.
If you pass it in a new Vue(... it will work

[PierreRambaud]

Sam problem here, using NuxtJs as framework. Can reproduce by updating https://github.com/DBAdventure/web package.json to >7.3.2

[scientistnik]

Use vue-router, and when starting on one page async call -> change page -> async call finished with same error:

"TypeError: Cannot read property 'takeLoan' of undefined"

[lakb248]

I think this problem is caused by this merge: https://github.com/kazupon/vue-i18n/pull/260

[Jarzka]

This is still happening with unit testing. Any help with that?

EDIT: Found a working solution:
https://github.com/kazupon/vue-i18n/issues/276

[jimenaleom]

I have the same problem, someone could solve this

[valentinoPereira]

The document has been omitted.

iview.i18n((key, value) => i18n.t(key, value))

add this code ,it will be ok

The complete example should be:

Vue.locale = () => {};
    const messages = {
        en: Object.assign({ message: 'hello' }, iview.langs['en-US']),
        zh: Object.assign({ message: '你好' }, iview.langs['zh-CN'])
    };

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

    iview.i18n((key, value) => i18n.t(key, value))

    new Vue({
        el: '#app',
        i18n: i18n,
        data: {
            visible: false,
            date: ''
        },
        methods: {
            show: function () {
                this.visible = true;
            }
        }
    })

I'm getting error
Uncaught ReferenceError: iview is not defined

[ChristherLenander]

Have the same problem with vue-i18n version 8.13. Did copy the example code for Lazy loading from the page.

[vedmant]

The same here, this package documentation is terrible, examples just don't work.

[QuestofIranon]

For anyone finding this issue in the future from a search, this page shows the proper solution:

https://lmiller1990.github.io/vue-testing-handbook/mocking-global-objects.html#example-with-vue-i18n

[almas]

My problem was I passed $t to $bvModal option.

        this.$bvModal.msgBoxOk(
          messageTxt,
          {
            title: this.$t("messageTitle"),
            centered: true
          }
        );

fix:

        let messageTitle = this.$t("messageTitle");
        this.$bvModal.msgBoxOk(
          messageTxt,
          {
            title: messageTitle,
            centered: true
          }
        );

[OzanKurt]

Still the same error since years...

[simon-moulin]

Me too, did you fix it ?

[hawking-feng]

after delete this line : Vue.locale = () => {}; it works fine for me