Property 'XXX' does not exist on type 'Ref<YYY>'.ts-plugin(2339)

[lmc3s3f0r]

OS: Ubuntu 22.04.4 LTS VSCode and Vue - Official extension updated to latest versions

Brief description: I'm working on a big Nuxt+TypeScript project, and a few weeks ago I started getting this error message on any ref variable that come from composables like useState or useFetch, and only seems to go away when I disable Volar (now "Vue - Official").

I've managed to reproduce it on a very small project, although the steps I followed don't always work if I try repeating them on new test projects.

How to reproduce: 1- Clone this project: https://github.com/lmc3s3f0r/test_ref_error1 2- Open it on VSCode and run npm install 3- To be sure, close and reopen the project in VSCode 4- Open pages/index.vue and you should see this error:

I tried a couple of times and it consistently happens to me on my computer. The weird thing is that this project keeps the latest Nuxt and Vue versions in package.json, which didn't throw these errors when it was just created (the error appeared when I changed the Nuxt and Vue versions, reinstalled, and then even when I came back to the latest versions, the error remained).

---

Now I'll explain how I created the project

1- Created a new Nuxt Project npx nuxi@latest init ref_error

2- Created an index page, a MyComp component and a useData composable, and edited app.vue to load NuxtPage. You can just create a new Nuxt project with the command above and copy these files: files.zip

3- Changed package.json. It was previously like this:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.10.3",
    "vue": "^3.4.19",
    "vue-router": "^4.3.0"
  }
}

Then I changed the "dependencies" section to have the same Nuxt and Vue versions I have in my "big" project, so it became:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.10.1",
    "vue": "3.4.14"
  }
}

4- Deleted node_modules and re-run npm install

After that, I started getting the same error I was having on the big project:

The error goes away if I type "data.value.label" instead of "data.label", but that of course crashes Nuxt:

The error also goes away if I disable Volar/Vue-Official, so I'm guessing there's something there.

Now, even if I roll back to original Vue and Nuxt version, the error now remains forever.

---

And even more weird: I've repeated this three times already (creating a project from scratch, adding the files, changing Vue and Nuxt versions to older and then revert to latest) and I get the error on two projects, but I'm not getting on the third one, and I've followed the exact same steps.

On this third project, I switch to older Nuxt/Vue versions and get the error, but roll back to latest versions and the error goes away.

However, cloning the project I linked at the top fo this message (which has the latest Vue and Nuxt versions) and running npm install, does throw the error.

So far I can't figure out what I'm missing, as it's such a simple project. There's not room for small mistakes on reproducing it.

---

More info: I've tried disabling all VSCode Extensions but Volar/Vue-official, but the error remains unless I disable Volar.

Hope you can reproduce it with this information. Please let me know if you need more from me.

[lmc3s3f0r]

One more thing: I uploaded the project that, while being exactly the same, doesn't give me this error: https://github.com/lmc3s3f0r/test_ref_error2

I clone this one, run npm install, and don't get that error message.

But the other repo I linked, which should be exactly the same as this one, does throw the error.

I must be overlooking something really obvious here, but can't figure out what.

[lmc3s3f0r]

Ok, so I found the difference between the two repos (there had to be one): package-lock.json had different content in certain lines regarding @vue/runtime-core.

Removing both files and running npm install again fixed the error in the first error, which had two vue runtime versions in package-lock.json (3.4.19 and 3.4.21).

Sorry for the false alarm. I guess this error was coming from Vue versions older tan 3.4.21.

[lmc3s3f0r]

Closing issue.

[abarke]

I had the same issue with Nuxt today after installing json-editor-vue@0.15.1

https://github.com/cloydlau/json-editor-vue

Seems it also has a dependency on a different version of Vue@3.4.22 that screws things up. No warnings in pnpm however.

Nuxt has a dependency on vue@3.3.6. When json-editor-vue@0.15.1 is installed it switches to vue@3.4.22 and I get the same issue.

npx nuxi info

------------------------------
- Operating System: Windows_NT
- Node Version:     v18.15.0
- Nuxt Version:     3.7.1
- CLI Version:      3.9.1
- Nitro Version:    2.7.0
- Package Manager:  pnpm@8.15.5
- Builder:          -
- User Config:      ssr, css, modules, ionic, vite, nitro
- Runtime Modules:  @nuxtjs/ionic@0.12.1, nuxt-electron@0.6.0
- Build Modules:    -
------------------------------

[i-MaxProfit]

I had the same issue. To fix it I've disabled and enabled again "Vue-Official" plugin.