Property X does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>

[J43fura]

I'm getting a similar error:

Property X does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { Menu: typeof Menu; MenuButton: typeof MenuButton; MenuItem: typeof MenuItem; MenuItems: typeof MenuItems; Popover: typeof Popover; ... 10 more ...; handleLinkClick: typeof handleLinkClick; }, ... 17 more ..., {}>'.ts-plugin(2339)

Where X is any function or variable in the utils folder. The app works fine on live and dev mode so nuxt is auto-importing correctly, but I think vscode's "Vue - Official" extension isn't understanding that this is auto-imported.

This only happens in the <template> section, it doesn't error inside <script>.

The error wasn't here when I had Nuxt 3.11.2, but I recently upgraded to 3.12.4 and it showed up. Is this happening for anyone else?

Originally posted by @jeffreytung7 in https://github.com/nuxt/nuxt/issues/28373#issuecomment-2272179792

[github-actions[bot]]

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 prioritize 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: 👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz 👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox 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/minimal-reproducible-example)

[danielroe]

This is likely caused by a third-party library or module that hasn't yet updated to augment vue rather than @vue/runtime-core. If you can provide a reproduction I can likely fix upstream...

[mat-ran]

I have the same error with function from utils folder and $t() function from @nuxtjs/i18n (v8.5.1). I'm using Nuxt 3.13.

[Henvy-Mango]

@danielroe Hey! This is a minimal reproduction. reproduction.zip

[maximilianmaihoefner]

In my case I also had @nuxtjs/i18n 8.5.1 but it still installs an old version of vue-i18n. Adding vue-i18n with version 9.14.0 explicitly to my package.json solved the issue for me. (Leaving this here just in case it helps anyone else)

[brambekkers]

For me also nuxtjs/i18n types, utils and for example navigateTo. I feel this is the same issue as the rest here. Everyhing is working but there are type error's everywhere.

[danielroe]

The issue here is that your package manager is pulling in the old version of vue-i18n. You can ask them to re-release a new version of @nuxtjs/i18n with updated version constraints, or perhaps you can manually install it in your package.json.

cc: @BobbieGoede.

[linspw]

Hi @danielroe , here I had a simillar error, with vue-i18n but also with global imports too:

This capitalize comes from utils dir.

If I try to use in script, the type work correctly:

I think it's not related with vue-i18n only, my versions are all updated:

Other example:

Packages: "nuxt": "3.13.0", "vue-i18n": "9.14.0", "vue-tsc": "^2.0.29", "vue": "3.4.38", "@nuxtjs/i18n": "8.5.1",

[nisegami]

I'm also experiencing the issue without even having vue-i18n or @nuxtjs/i18n installed. Anyone have tips on how I could go about tracking down the problematic package?

[danielroe]

If you can provide a reproduction I can probably find the issue quite quickly.

[danielroe]

Hopefully you also saw the workaround in the release notes 🙏

[BobbieGoede]

The issue here is that your package manager is pulling in the old version of vue-i18n. You can ask them to re-release a new version of @nuxtjs/i18n with updated version constraints, or perhaps you can manually install it in your package.json.

Refreshing lockfiles should install the latest vue-i18n with the correct types, though I can publish a patch that raises the version constraints as well if necessary.

For everyone running into this issue, if you're unable to provide a reproduction, can you provide a full list of vue/nuxt modules and plugins you have installed and which version? Also check if you have any type augmentations within your project or within modules/plugins augmenting @vue/runtime-core.

Also curious what IDE you're using, it seems like some users somehow experience different type issues with Webstorm 🤔

[mat-ran]

I tried to create reproduction, but I can't repeat error in new project. I'm using vsCode with official Vue extension, which has been released today, and error disappeared.

My package list:

{
        "@nuxt/eslint": "^0.5.2",
        "@nuxtjs/i18n": "^8.5.1",
        "@pinia/nuxt": "^0.5.4",
        "@vite-pwa/nuxt": "^0.10.1",
        "nuxt": "^3.13.0",
        "nuxt-tiptap-editor": "^1.2.1",
        "pinia": "^2.2.2",
        "vue": "latest",
        "vuetify-nuxt-module": "^0.17.1",
}

[danielroe]

@reg0edit Make sure all your dependencies/lockfile are updated.

For example, I believe I've had a report of this from vuetify but it should be resolved in latest vuetify version: https://github.com/vuetifyjs/vuetify/commit/7c8aeefdc097ff9b74a733ed17b6a8cd9e1f8575.

[Chocopieca]

Today I reinstalled node_modules and package-lock.json and caught type errors in all my templates, $t, $router and all auto-import components. this.$t also catch type error. In localhost all autoimorted components are working good. I'd tried update all my dependancy to last version but it did't halp. I have been worked good with this depandacies for 2 mounth without reinstall node-modules.

Packages: "nuxt": "^3.11.2", "vue-router": "^4.3.2", "vue-tsc": "^2.1.2", "typescript": "^5.4.5", "@nuxtjs/i18n": "^8.3.1", "@nuxt/types": "^2.18.1",

Also I caught problem with definePageMeta layout, it's set "defult" layout only and I can't use other laoyuts. I can set manualy by name attribute for NuxtLayout, but it's don't good solution for me.

[danielroe]

If someone is encountering this, please provide a reproduction. 🙏

@Chocopieca you have a Nuxt v2 dependency in there. As well as some outdated versions of i18n/vue-router/nuxt...

[Chocopieca]

I tried to reproduce but caught other error, dependancy error. https://github.com/nuxt/nuxt/issues/28755 I will try to reproduce error with type again

[Chocopieca]

nuxt-autocomplit-type-error.zip There is reprodus the proble with types and NuxtLayout

[Chocopieca]

I'v removed @vite-pwa/nuxt from modules in nuxt config in my reporuction project and problem with type disappeared. But this removing didn't help in my main project.

[Chocopieca]

I also caught this error when add to nuxt.config.ts

typescript: {
    typeCheck: true,
  },

[Chocopieca]

I added this code to nuxt-shim.d.ts file in my reproduction project and error showed again

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $test: string;
  }
}

But in my main project removing this declare didn't halp

[Chocopieca]

I fined this declare in my main project and problem with types disappeared

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $breakpoint: BreakpointI;
    $iMask: IMaskI;
  }
}

[Chocopieca]

@danielroe it looks like modifire of ComponentCustomProperties in @vue/runtime-core is crashing types May I create new discusion in vue github or it's nuxt problem ?

[94726]

@Chocopieca looks like it's neither a Vue nor a Nuxt problem. Try to always augment vue instead of @vue/runtime-core, as recommended here: https://vuejs.org/api/utility-types.html#componentcustomproperties. e.g.

declare module 'vue' {
  interface ComponentCustomProperties {
    $breakpoint: BreakpointI;
    $iMask: IMaskI;
  }
}

If something augments @vue/runtime, all libraries that augment vue (which are most libs) will break.

[svk-man]

I also got this error when trying to build a project. The solutions suggested above did not help.

We use functions and constants from utils folder in our project, which were imported automatically before.

In the end, I just imported the necessary functions into vue-templates:

import { getPhoneLink, getPhoneText } from '@/utils'

I also had to import navigateTo once, because it was used in the template

import { navigateTo } from '#app/composables/router'

---

Looks like I had a similar problem https://github.com/nuxt/nuxt/issues/28373#issuecomment-2272693408

[codeblockhead]

我也遇到了这个问题，当我在telemplate中使用时，就会抛出异常，nuxt的版本是3.12.4