Calling tm(key) emits error "TS2589: Type instantiation is excessively deep and possibly infinite."

[JulianSchoenbaechler]

Reporting a bug?

With Typescript v4.7, the call to tm(key) in the composition API sometimes results in a type error being thrown:

error TS2589: Type instantiation is excessively deep and possibly infinite.

I can't seem to reproduce it consistently, so my only way of dealing with this for the moment is by sprinkling @ts-ignore's through my codebase.

Expected behavior

Correct type processing of the Vue I18n composition API.

Reproduction

<div class="container">
  <p v-for="line in tm('lines')">
    {{ rt(line) }}
  </p>
</div>

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-3770K CPU @ 3.50GHz
    Memory: 8.24 GB / 15.94 GB
  Binaries:
    Node: 18.7.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.47)
    @vue/tsconfig: ^0.1.3 => 0.1.3
    vite: ^3.0.5 => 3.0.5
    vue: ^3.2.37 => 3.2.37
    vue-i18n: ^9.2.2 => 9.2.2
    vue-tsc: ^0.40.0 => 0.40.0
    typescript: ~4.7.4 => 4.7.4

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion
• The provided reproduction is a minimal reproducible example of the bug.

[horans]

error TS2589: Type instantiation is excessively deep and possibly infinite.

same error when trying to use i18n in plain js(outside component) with const { t } = i18n.global

[Fuzzyma]

same error when trying to use i18n in plain js(outside component) with const { t } = i18n.global

Same here

[matzeso]

This has a Need More Info tag - anything in particular you are looking for?
Our pipelines are also failing on const { t } = i18n.global with the

Type instantiation is excessively deep and possibly infinite.

error.

[chimpydev]

Is this resolved?
I'm having this every fckg time

[Kruptein]

Upgrading from 9.1.10 to 9.2.2 causes this issue for me with i18n.global.t

[ll60]

Upgrading from 9.1.10 to 9.2.2 causes this issue for me with i18n.global.t

我也遇到了相同的问题，降级后，解决了，十分感谢

[Ragura]

Encountering the same issue with 9.2.2.
I can provide a little more information. I am writing my localization files in .yml format and importing the messages from the virtual @intlify/vite-plugin-vue-i18n/messages. Everything works as expected within the application, but the following will give me the Type instantiation is excessively deep and possibly infinite. typescript error:

import messages from '@intlify/vite-plugin-vue-i18n/messages'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'nl',
  globalInjection: true,
  messages,
})

const t = i18n.global.t // Type instantiation is excessively deep and possibly infinite
export { i18n, t }

I have noticed the type returning from the import messages... is any. If I change the messages property of createI18n() to include some manual messages, the error does not appear.

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'nl',
  globalInjection: true,
  messages: {
    en: {
      word: 'Word',
    },
  },
})

const t = i18n.global.t // NO ERROR
export { i18n, t }

The reason I need to use the t function this way is because I'm using it outside a component in a test file. I hope this extra information helps in figuring out the issue!

[luisdeka]

Upgrading from 9.1.10 to 9.2.2 causes this issue for me with i18n.global.t

For me the 2 versions throw same error

[popadicbranislav]

Same issue - "vue-i18n": "^9.2.2"
Volar TypeScript version: 4.8.4

// i18n.ts
import { createI18n } from 'vue-i18n'

// Import locales
const messages = Object.fromEntries(
  Object.entries(
    import.meta.glob<{ default: any }>('../locales/*.y(a)?ml', { eager: true }))
    .map(([key, value]) => {
      const yaml = key.endsWith('.yaml')
      return [
        key.slice(key.lastIndexOf('/') + 1, yaml ? -5 : -4),
        value.default,
      ]
    }),
)

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  messages,
})

export const { t } = i18n.global

export default i18n

Usage of t outside of Vue component files:

// some.ts
import { t } from '../i18n'

const text = t('example')
//           ^ - Type instantiation is excessively deep and possibly infinite. ts(2589)

Error:
Type instantiation is excessively deep and possibly infinite. ts(2589)

If i import message entries one by one and set createI18n according to the docs I am not getting this error, so i guess the problem is messages being imported dynamically and incorrectly setting the generic for the createI18n.

const en = import.meta.glob<{ default: any }>('../locales/en.yml', { eager: true })
type MessageSchema = typeof en
const messages = {  en }

const i18n = createI18n<{ message: MessageSchema }, 'en'>({
  legacy: false,
  locale: 'en',
  messages,
})

Is there a way I can make it work with dynamically imported messages?

[antoniogiroz]

Hello!

I was the same type issue and I've solved casting the messages files to I18nOptions['message'] type:

import type { I18nOptions } from 'vue-i18n';
import { createI18n } from 'vue-i18n';

const messages = Object.fromEntries(
  Object.entries(import.meta.glob<{ default: unknown }>(`./locales/*.json`, { eager: true })).map(([key, value]) => [
    key.slice(10, -5),
    value.default,
  ])
) as I18nOptions['messages'];

const i18n = createI18n({
  locale: 'en',
  messages,
});

export default i18n;

I hope it helps you!

[juni0r]

I'm still experiencing this issue with v9.9.1, using tm with messages imported directly from JSON files via import. Can this be reopened?