Vue-i18n 'Cannot read property '_t' of undefined at Proxy.Vue.$t'

11
votes

Having issues incorporating vue-i18n into my app. Used this page as inspiration.

  <b-navbar-nav class="ml-auto" >
    <b-nav-item-dropdown :text="display_name" right>
      <b-dropdown-item disabled>{{ $t('username') }}: {{ username }}</b-dropdown-item>
      <b-dropdown-item disabled>Organisation: {{ organisation }}</b-dropdown-item>
    </b-nav-item-dropdown>
  </b-navbar-nav>

Gives the error: Cannot read property '_t' of undefined at Proxy.Vue.$t Tracking the error in Chrome devtools takes me to line 149 (the return statement) of vue-i18n.esm.js:

Vue.prototype.$t = function (key) {
  var values = [], len = arguments.length - 1;
  while ( len-- > 0 ) values[ len ] = arguments[ len + 1 ];

  var i18n = this.$i18n;
  return i18n._t.apply(i18n, [ key, i18n.locale, i18n._getMessages(), this ].concat( values ))
};

I'm using vue-cli-3 webpack config and installed vue-i18n from npm and using as a plugin.

i18n.js (in src/plugins directory):

import Vue from 'vue/dist/vue.js';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const messages = {
  'en': {
    username: 'Username',
    ...
  },
  'se': {
    username: 'Användarnamn',
    ...
  }
};

export let i18n = new VueI18n({
  locale: 'en', // set locale
  fallbackLocale: 'se', // set fallback locale
  messages, // set locale messages
});

main.js:

import Vue from 'vue/dist/vue.js'
import VueRouter from 'vue-router'
import BootstrapVue from 'bootstrap-vue'
import VueSpinners from 'vue-spinners'

import i18n from './plugins/i18n'
...
new Vue({
  router,
  i18n,
  data() {
    return store;
  },
  render: h => h(App)
}).$mount('#app')

Dependencies from package.json:

"dependencies": {
  "axios": "^0.18.0",
  "bootstrap-vue": "^2.0.0-rc.11",
  "npm": "^6.5.0",
  "ol": "^5.3.0",
  "proj4": "^2.5.0",
  "qs": "^6.6.0",
  "vue": "^2.5.17",
  "vue-i18n": "^8.8.1",
  "vue-router": "^3.0.2",
  "vue-spinners": "^1.0.2"
},

What do I need to do?

5
vue.jsvuejs2vue-i18n
If anyone came to this page from trying to get i18n to work with component testing in Cypress there is an example in their old repository that goes through it here on GitHub – Rory

5 Answers

13
votes

Ah, embarrassingly simple, I changed

import i18n from './plugins/i18n'

to

import {i18n} from './plugins/i18n'

and all works now.

2
votes

If anyone came here with the same issue, but is using export default, I had this in my main.js:

import translations from './translations';

new Vue({
    translations,
    ...
}).$mount('#app');

Where translations/index.js loaded the plugin and everything like normal. Apparently you have to name the import 'i18n' for this to work correctly:

import i18n from './translations';

new Vue({
    i18n,
    ...
}).$mount('#app');
2
votes

src/i18n/index.js

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

Vue.use(VueI18n)


// 注册i18n实例并引入语言文件
const i18n = new VueI18n({
  locale: 'zh_cn',
  messages: {
    'zh_cn': require('@/assets/languages/zh_cn.json'),
    'en_us': require('@/assets/languages/en_us.json'),
    'es_ve': require('@/assets/languages/es-ve.json')
  }
})

export default i18n

main.js

import i18n from '@/i18n'

new Vue({
  i18n,
  router,
  render: h => h(App)
}).$mount('#app')
1
votes

Vue.prototype._i18n = i18n must be under the line App.mpType = 'app'

App.mpType = 'app'
Vue.prototype._i18n = i18n

https://github.com/kazupon/vue-i18n/issues/276#issuecomment-663071363

0
votes

I also reported this error, but I did not solve it by using the above method. In the end, I found that we should not introduce modal. Remove the following code to resolve:

import Modal from XXX

export default {
  components: {
    Modal
}