global $t show issue

[JonDelWeb]

Reporting a bug?

The global variable "$t" show issue 'Property '$t' does not exist on type' in vue template

My ./i18n/index.ts files :

  import { createI18n } from 'vue-i18n';
  
  import fr from "./locales/fr.json";
  type MessageSchema = typeof fr
  
  export default createI18n<[MessageSchema], 'fr'>({
    allowComposition: true,
    locale: import.meta.env.VITE_DEFAULT_LOCALE,
    fallbackLocale: import.meta.env.VITE_FALLBACK_LOCALE,
    legacy: false,
    messages: {
      'fr': fr,
    },
  })  

My main.ts file :

import { createApp } from 'vue';
import { createPinia } from 'pinia';

import i18n from "./i18n";

import App from './App.vue';
import router from './router';

import './index.css';

const app = createApp(App)

app.use(i18n)
app.use(createPinia())
app.use(router)

app.mount('#app')

My template file :

<nav class="flex flex-row mx-2 m-0.5">
      <RouterLink class="px-1" to="login">{{  $t("auth.login") }}</RouterLink> /
       <RouterLink class="px-1" to="register">{{  $t("auth.register") }}</RouterLink>
</nav>

Expected behavior

No issue :D

Reproduction

1. create new vue3 project
2. install "vue-i18n": "^9.3.0-beta.17",
3. create json files
4. use $t in template

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (4) x64 Intel(R) Core(TM) i5-7300U CPU @ 2.60GHz
    Memory: 6.79 GB / 15.50 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.16.0 - /usr/bin/node
    npm: 8.19.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 113.0.5672.92
    Firefox: 113.0.1
  npmPackages:
    @intlify/unplugin-vue-i18n: ^0.10.0 => 0.10.0 
    @vitejs/plugin-vue: ^4.2.1 => 4.2.2 
    @vitejs/plugin-vue-jsx: ^3.0.1 => 3.0.1 
    @vue/eslint-config-prettier: ^7.1.0 => 7.1.0 
    @vue/eslint-config-typescript: ^11.0.3 => 11.0.3 
    @vue/tsconfig: ^0.3.2 => 0.3.2 
    vite: ^4.3.4 => 4.3.5 
    vue: ^3.2.47 => 3.3.1 
    vue-i18n: ^9.3.0-beta.17 => 9.3.0-beta.14-77e850b 
    vue-moment: ^4.1.0 => 4.1.0 
    vue-router: ^4.1.6 => 4.2.0 
    vue-tsc: ^1.6.4 => 1.6.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 Discussions

[dodo1708]

I'm having the same issue.
Adding

"types": "./dist/vue-i18n.d.ts",

to

"exports": {
    ".": {
      "types": "./dist/vue-i18n.d.ts",
      "import": {
        "node": "./index.mjs",
        "default": "./dist/vue-i18n.esm-bundler.js"
      },
      "require": "./index.js"
    },
    "./dist/*": "./dist/*",
    "./index.mjs": "./index.mjs",
    "./package.json": "./package.json"
  },

in the vie-i18n package.json fixed the issue for me when running it locally.

[g1eny0ung]

I have the same problem. The situation for me is that I upgrade vue to v3.3 with pnpm, the package with the old vue version seems to be confusing with the new one, and running pnpm dedupe solves this problem.

[oikalyptus]

I have the same issue. dedupe won’t fix it for me.
I ran patch-package with @dodo1708 changes and it works.

[DominikWeickgenannt]

I was getting this error even with version 9.3.0-beta.17.
Deleting the node_modules & dist folders and rebuilding solved this for me.

[kazupon]

Thank you for your reporting!

Issue template said:

Please provide a link to a repo that can reproduce the problem you ran into. A minimal reproduction is required (Why?). If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "Status: Need More Info" label. If no reproduction is provided after 5 days, it will be closed.

Could you give us your minimal reproduction with github repo or stackbliz please? 🙏

[JonDelWeb]

No problem, I will try to do it this week-end... ;)

[mats852]

Hi @kazupon, I cannot share my repository, but I can provide further details, I have the same problem.

Here is the full error message

error TS7016: Could not find a declaration file for module 'vue-i18n'. '<redacted>/node_modules/vue-i18n/dist/vue-i18n.esm-bundler.js' implicitly has an 'any' type.
  There are types at '<redacted>/node_modules/vue-i18n/dist/vue-i18n.d.ts', but this result could not be resolved when respecting package.json "exports". The 'vue-i18n' library may need to update its package.json or typings.

[leighwilliams]

I ran in to this going from 9.2.2 to 9.3.0-beta-19.

With 9.2.2 in node_modules/vue-i18n/dist/vue-i18n.d.ts there is:

declare module '@vue/runtime-core' {
    ...
    $t<
      Key extends string,
      DefinedLocaleMessage extends RemovedIndexResources<DefineLocaleMessage> = RemovedIndexResources<DefineLocaleMessage>,
      Keys = IsEmptyObject<DefinedLocaleMessage> extends false
        ? PickupPaths<{
            [K in keyof DefinedLocaleMessage]: DefinedLocaleMessage[K]
          }>
        : never,
      ResourceKeys extends Keys = IsNever<Keys> extends false ? Keys : never
    >(
      key: Key | ResourceKeys | Path
    ): TranslateResult
    ...
}

With 9.3.0-beta-19 there is no such section within node_modules/vue-i18n/dist/vue-i18n.d.ts. The entire declare module '@vue/runtime-core' { ... } is missing.

[oognuyh]

The same issue with 9.3.0-beta-19, so I downgraded to 9.3.0-beta-18.

[dkern]

I'm on 9.2.2 using vite and typescript and when building it shows the error below. When using the development server, everything is fine. But building throws this error:

error TS2339: Property '$t' does not exist on type '{ $: ComponentInternalInstance; ...

[dkern]

@kazupon
I can also confirm that adding types to the package.json fixes the issue for me. v9.3.0-beta.19 is not working.

  "exports": {
    ".": {
      "types": "./dist/vue-i18n.d.ts",
      // ...
    },
  },