Property '$t' does not exist on type 'CreateComponentPublicInstanceWithMixins<ToResolvedProps...;

FlorientPlouvin commented 2 hours ago

Environment

Operating System: Linux
Node Version: v20.14.0
Nuxt Version: 3.13.2
CLI Version: 3.14.0
Nitro Version: 2.9.7
Package Manager: yarn@4.3.0
Builder: -
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

My package json :

  "dependencies": {
    "@heroicons/vue": "^2.1.3",
    "@histoire/plugin-nuxt": "^0.17.17",
    "@histoire/plugin-vue": "^0.17.17",
    "@nuxt/eslint-config": "^0.3.6",
    "@nuxt/test-utils": "^3.12.0",
    "@nuxtjs/i18n": "^8.5.5",
    "@nuxtjs/seo": "^2.0.0-rc.18",
    "@nuxtjs/tailwindcss": "^6.12.1",
    "@pinia/nuxt": "^0.5.1",
    "@tailwindcss/container-queries": "^0.1.1",
    "@vuelidate/core": "^2.0.3",
    "@vuelidate/validators": "^2.0.4",
    "@vueuse/components": "^11.1.0",
    "@vueuse/core": "^11.1.0",
    "@vueuse/nuxt": "^11.1.0",
    "dayjs": "^1.11.11",
    "dotenv": "^16.4.5",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-vitest": "^0.3.26",
    "histoire": "^0.17.17",
    "jwt-decode": "^4.0.0",
    "mitt": "^3.0.1",
    "nuxt": "^3.13.2",
    "nuxt-auth-utils": "^0.4.2",
    "nuxt-snackbar": "^1.0.4",
    "pinia": "^2.1.7",
    "prettier": "^3.2.5",
    "sass": "^1.74.1",
    "tailwind-merge": "^2.4.0",
    "unplugin-auto-import": "^0.17.5",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0",
    "vue-tailwind-datepicker": "^1.7.3",
    "vue-tsc": "^2.1.6",
    "vue3-carousel-nuxt": "^1.1.3",
    "webdriverio": "^8.36.1"
  },
  "devDependencies": {
    "@histoire/plugin-nuxt": "^0.17.17",
    "@histoire/plugin-vue": "^0.17.17",
    "@nuxt/eslint": "^0.3.0-beta.3",
    "@nuxtjs/device": "^3.1.1",
    "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
    "@typescript-eslint/eslint-plugin": "^7.3.1",
    "@typescript-eslint/parser": "^7.3.1",
    "@vitest/browser": "^1.5.2",
    "@vitest/coverage-v8": "^1.4.0",
    "@vitest/ui": "^1.5.2",
    "@vue/test-utils": "^2.4.5",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-vitest": "^0.3.26",
    "happy-dom": "^14.3.1",
    "husky": "^9.0.11",
    "jsdom": "^24.0.0",
    "playwright-core": "^1.42.1",
    "typescript": "^5.4.3",
    "vitest": "^1.5.2"
  },
  "resolutions": {
    "vite-plugin-checker": "0.8.0",
    "vue-tsc": "2.0.29"
  },
  "packageManager": "yarn@4.3.0"

Describe the bug

Just update to nuxt 3.13.2 (started form 3.12.2) and vs-code give me this error : Property '$t' does not exist on type 'CreateComponentPublicInstanceWithMixins<ToResolvedProps<{ slides: ISlider[]; class?: string | undefined; sizeClass?: string | undefined; hasGradient?: boolean | undefined; }, {}>, { ChevronLeftIcon: typeof ChevronLeftIcon; ChevronRightIcon: typeof ChevronRightIcon; userStore: typeof userStore; width: typeof width; p...'

When I want to build my project (with nuxt build), it give me the same error, but no problem in dev mod. I also see my translation in dev mod.

Additional context

I tried to create a vue.d.ts file and put this inside :

declare module "vue" {
  interface ComponentCustomProperties {
    $t: (key: string, ...params: any[]) => string;
  }
}

Yes the $t error disapear, but now every emit or called function (in Pinia for exemple) is now an implicit any and building not working.

Logs

No response

github-actions[bot] commented 2 hours ago

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 `needs reproduction` 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 starter (v8 and higher)](https://stackblitz.com/fork/github/BobbieGoede/nuxt-i18n-starter/tree/v8) 👉 [Reproduction starter (edge)](https://stackblitz.com/fork/github/BobbieGoede/nuxt-i18n-starter/tree/edge) A public GitHub repository is also perfect. 👌 Please ensure that the reproduction is as **minimal** as possible. See more details [in our guide](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)

FlorientPlouvin commented 1 hour ago

A small repository for reproduction https://github.com/FlorientPlouvin/Reproduction-i18n

BobbieGoede commented 1 hour ago

I haven't checked it locally yet, but you should change any module augments from @vue/runtime-core to vue, such as the one here https://github.com/FlorientPlouvin/Reproduction-i18n/blob/main/plugins.d.ts should be like this instead:

declare module "vue" {
  interface ComponentCustomProperties {
    $device: Device;
    $breakpoints: {
      isMobile: boolean;
      isTablet: boolean;
      isDesktop: boolean;
      isPortable: boolean;
      current: string;
    };
  }
}

Augmenting @vue/runtime-core breaks other correct augmentations.

nuxt-modules / i18n