Type instantiation is excessively deep and possibly infinite

[maxdzin]

This plugin attempts to be a great help with making the code clear, so first of all, I want to thank you for creating it.

There's a problem now when using this plugin. Starting from version 3.0.0-next.2 and up to the current 3.0.0-next.7 it caused typecheck command to fail with an error: error TS2589: Type instantiation is excessively deep and possibly infinite.

Please, note that before next version it was working properly and didn't inflict such a thing.

Tell us about your environment

• ESLint version: 8.57.0
• eslint-plugin-vue version: -
• eslint-plugin-vue-i18n version: 3.0.0-next.7
• Node version: 20.11.1

Please show your full configuration:

I prepared the reproduction repository with a couple of branches with different configurations (see below).

What did you do?

Just try to use some translation in a vue file template:

<template>
  <div>
    <span>{{ $t('app.intro.title') }}</span>
  </div>
</template>

What did you expect to happen? Everything works well and running typecheck didn't show the mentioned error.

What actually happened?

When launching pnpm typecheck it fails with an error:

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

Please, note that even without specifying the plugin in eslint configuration or even without eslint setup in project at all, it caused typecheck to fail - just by having the plugin installed as a dev dependency (see the initial branch of reproduction repository for that case).

Repository to reproduce this issue

As mentioned, I created a repository with a couple of branches for several configurations:

• attempt to use flat config - https://github.com/maxdzin/nuxt-i18n-test
• using eslintrc - https://github.com/maxdzin/nuxt-i18n-test/tree/eslint-rc
• initial minimal set to reproduce - https://github.com/maxdzin/nuxt-i18n-test/tree/initial

Launching pnpm typecheck in any of the branches above fails with an error.

[ferferga]

This is an issue with your setup. Check https://github.com/intlify/bundle-tools/pull/272 and https://github.com/intlify/vue-i18n-next/issues/1119#issuecomment-1351270253

This is not an ESLint error, since TypeScript doesn't have anything to do with ESLint.

[maxdzin]

This is not an ESLint error, since TypeScript doesn't have anything to do with ESLint.

There's something wrong when using this plugin with @nuxtjs/i18n module, but not only. As I stated above, the problem appears even with just simply installing this plugin as a dependency. I'm not yet sure what is wrong there exactly, since I haven't time to check that deeply yet.

@ferferga thank you for the links, I'll try to check that later.

[verynong]

I'm currently experiencing this problem

My Environment： eslint@^9.7.0 vue-i18n@^9.13.1 @intlify/unplugin-vue-i18n@^4.0.0 typescript@^5.5.4

TS2589 Type instantiation is excessively deep and possibly infinite. There's no problem with using $tm in templates

// test.vue
<template>
  <div v-for="(item, index) in tm('aboutUs.details.4.detail.desc')" :key="index"> // There's no problem here.
    {{ $rt(item) }}
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'

const { tm } = useI18n()
const a = tm('aboutUs.details.4.detail.desc') // TS2589 Type instantiation is excessively deep and possibly infinite.
</script>

// i18n.ts
import { createI18n } from 'vue-i18n'
import messages from '@intlify/unplugin-vue-i18n/messages'

const cacheKey = 'locale'
type MessageSchema = NonNullable<typeof messages>['zh-CN']
type MessagesKey = keyof NonNullable<typeof messages>

export const locales: { value: MessagesKey; label: string }[] = [
  { value: 'zh-CN', label: '简体中文' },
  { value: 'en-US', label: 'English' }
]

function localeFormat(lang: string): string {
  if (/^zh/.test(lang)) {
    lang = 'zh-CN'
  } else if (/^en/.test(lang)) {
    lang = 'en-US'
  }
  lang = lang || 'zh-CN'
  return lang.replace(/_/g, '-')
}

export const i18n = createI18n<[MessageSchema], MessagesKey, false>({
  legacy: false,
  locale: localeFormat(localStorage.getItem(cacheKey) || window.navigator.language),
  fallbackLocale: 'zh-CN',
  missingWarn: false,
  fallbackWarn: false,
  messages
})