When running app.use(i18n): Argument of type 'I18n<...>' is not assignable to parameter of type 'Plugin<[]>'

[cuikho210]

Reporting a bug?

I installed vue-i18n in my Vue.js project, which is using TypeScript. After initializing the i18n instance and trying to run .use(i18n) in my application, an error occurs, and I'm unable to use it properly.

Expected behavior

app.use(i18n) should work without type errors.

Reproduction

First:

bun add vue-i18n@latest

Then:

src/i18n/index.ts:

import { createI18n } from 'vue-i18n'
import messagesEnUS from './en-US.json'

type I18nSchema = typeof messagesEnUS

const messages = {
  'en-US': messagesEnUS,
}

export type I18nLocale = keyof typeof messages

export const i18n = createI18n<I18nSchema, I18nLocale>({
  locale: 'en-US',
  fallbackLocale: 'en-US',
  messages,
})

src/main.ts:

import './index.scss'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { i18n } from './i18n'
import { router } from './router'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.use(i18n)
app.use(router)
app.mount('#app')

System Info

System:
    OS: Linux 6.10 Fedora Linux 40 (KDE Plasma)
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1255U
    Memory: 2.25 GB / 7.43 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 20.17.0 - /usr/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.8.1 - /usr/local/bin/npm
    bun: 1.1.29 - ~/.bun/bin/bun
  npmPackages:
    @vitejs/plugin-vue: ^5.1.4 => 5.1.4
    @vue/typescript-plugin: ^2.1.6 => 2.1.6
    vite: ^5.4.8 => 5.4.8
    vue: ^3.5.11 => 3.5.10
    vue-router: ^4.4.5 => 4.4.5
    vue-tsc: ^2.1.6 => 2.1.6

Screenshot

No response

Additional context

package.json:

{
  "name": "my-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@remixicon/vue": "^4.2.0",
    "@vuuui/vue": "^0.1.3",
    "pinia": "^2.2.4",
    "ts-binding": "workspace:*",
    "vue": "^3.5.11",
    "vue-i18n": "^9.14.1",
    "vue-router": "^4.4.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.1.4",
    "@vue/typescript-plugin": "^2.1.6",
    "autoprefixer": "^10.4.20",
    "prettier": "^3.3.3",
    "prettier-plugin-css-order": "^2.1.2",
    "sass": "^1.79.4",
    "typescript": "^5.6.2",
    "vite": "^5.4.8",
    "vue-tsc": "^2.1.6"
  }
}

Diagnostics:

src/main.ts:14:9 - error TS2345: Argument of type 'I18n<{ "en-US": LocaleMessage<VueMessageType>; }, { "en-US": DateTimeFormat; }, { "en-US": NumberFormat; }, string, true>' is not assignable to parameter of type 'Plugin<[]>'.
  Type 'I18n<{ "en-US": LocaleMessage<VueMessageType>; }, { "en-US": DateTimeFormat; }, { "en-US": NumberFormat; }, string, true>' is not assignable to type 'FunctionPlugin<[]>'.
    Type 'I18n<{ "en-US": LocaleMessage<VueMessageType>; }, { "en-US": DateTimeFormat; }, { "en-US": NumberFormat; }, string, true>' is not assignable to type '(app: App<any>) => any'.
      Type 'I18n<{ "en-US": LocaleMessage<VueMessageType>; }, { "en-US": DateTimeFormat; }, { "en-US": NumberFormat; }, string, true>' provides no match for the signature '(app: App<any>): any'.

14 app.use(i18n)

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 Discussions

[github-actions]

Thank you for your feadback!
Would you be able to provide a reproduction 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If Status: Need More Info labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 Reproduction mininal starter
👉 Reproduction starter with unpluguin-vue-i18n

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[kazupon]

@cuikho210
Thank you for your reporting!

Your code snippet is very helpful, but some of the code is missing. As mentioned in the previous comment, I would like you to provide the minimal reproduction code on stackbliz. 🙏

[cuikho210]

Apologies for the confusion. I rechecked the issue, and it seems the error only occurs in my current project and doesn't appear in a new one. After deleting the bun.lockb and node_modules files, the error disappeared. It seems more like a package conflict rather than an issue with vue-i18n itself. 😸