vue-i18n: 9.0.0-beta.10 - Uncaught (in promise) TypeError: _ctx.$t is not a function

[RollingTL]

"vue-i18n": "^9.0.0-beta.10", "vue": "^3.0.4"

The error when using i18n-next globally - Uncaught (in promise) TypeError: _ctx.$t is not a function

This happened after I had done npm update today. All was working fine before. The only change was versions updating.

Thats how I plug in i18n: main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import { createI18n } from 'vue-i18n'
import messageDictionary from '@/i18n/messageDictionary'

const i18n = createI18n({
  legacy: false,
  locale: 'ru',
  fallbackLocale: 'ru',
  availableLocales: ['ru', 'kz', 'en'],
  messages: messageDictionary()
})

const app = createApp(App)
app.use(store)
app.use(i18n)
app.use(router).mount('#app')

Thats client code causing error: client.vue

<template>
    <h6 class="mb1">
      {{ $t('land.new-land') }}
    </h6>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return {}
  }
})
</script>

Last package.json:

  "dependencies": {
    "@types/vuelidate": "^0.7.13",
    "@vuelidate/core": "^2.0.0-alpha.8",
    "@vuelidate/validators": "^2.0.0-alpha.5",
    "axios": "^0.21.0",
    "vue": "^3.0.4",
    "vue-i18n": "^9.0.0-beta.10",
    "vue-router": "^4.0.1",
    "vuex": "^4.0.0-rc.2",
    "xstate": "^4.15.1"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-eslint": "^4.5.9",
    "@vue/cli-plugin-router": "^4.5.9",
    "@vue/cli-plugin-typescript": "^4.5.9",
    "@vue/cli-plugin-unit-jest": "^4.5.9",
    "@vue/cli-plugin-vuex": "^4.5.9",
    "@vue/cli-service": "^4.5.9",
    "@vue/compiler-sfc": "^3.0.4",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-beta.12",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.2.0",
    "eslint-plugin-vue": "^7.2.0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-alpha.7"
  }

Previous package.json:

  "dependencies": {
    "@types/vuelidate": "^0.7.13",
    "@vuelidate/core": "^2.0.0-alpha.8",
    "@vuelidate/validators": "^2.0.0-alpha.5",
    "axios": "^0.21.0",
    "vue": "^3.0.3",
    "vue-i18n": "^9.0.0-beta.8",
    "vue-router": "^4.0.0-rc.5",
    "vuex": "^4.0.0-rc.2",
    "xstate": "^4.14.1"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-eslint": "^4.5.9",
    "@vue/cli-plugin-router": "^4.5.9",
    "@vue/cli-plugin-typescript": "^4.5.9",
    "@vue/cli-plugin-unit-jest": "^4.5.9",
    "@vue/cli-plugin-vuex": "^4.5.9",
    "@vue/cli-service": "^4.5.9",
    "@vue/compiler-sfc": "^3.0.3",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-beta.11",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-alpha.6"
  }

[RollingTL]

Tested also version 9.0.0-beta.9 and got even more terrifying error:

Uncaught ReferenceError: exports is not defined
    at Module.<anonymous> (vue-i18n.esm-browser.js:192)
    at Module../node_modules/vue-i18n/dist/vue-i18n.esm-browser.js (vue-i18n.esm-browser.js:4857)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Module../src/modules/useLocale.ts (useLocale.ts:1)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/ts-loader/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js?!./src/App.vue?vue&type=script&lang=ts (App.vue?1d14:2)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)

Version 9.0.0-beta.8 works fine.

[Alymbek]

hi, @RollingTL . I just updated to latest version of this library without any issue.

Pls try to delete "node_modules" folder and "package-lock.json" file and install again. May be need to clean npm cache also(as last option)

[kazupon]

Thank you for you reporting!

I seem that you are using VUe I18n in Composition API mode. In Composition API mode, you can't use an API prefixed with $ and injected into a component. To use it, you need to set to globalInjection: true at createI18n.

See details here: https://vue-i18n-next.intlify.dev/advanced/composition.html#implicit-with-injected-properties-and-functions

[RollingTL]

To use it, you need to set to globalInjection: true at createI18n

Thats it! Thank you. All is working now.