v2.1.4 reports error on global properties although properly augmented

[douglasg14b]

Vue - Official extension or vue-tsc version

v2.1.4

VSCode version

1.92.2

Vue version

3.4.38

TypeScript version

5.4.5

System Info

No response

package.json dependencies

{
    "dependencies": {
        "@mdi/font": "7.4.47",
        "@sentry/vite-plugin": "^2.16.1",
        "@sentry/vue": "^8.13.0",
        "@stripe/connect-js": "^3.3.6",
        "@stripe/stripe-js": "^3.5.0",
        "@types/cookie": "^0.6.0",
        "@vueuse/core": "^10.9.0",
        "approximate-number": "^2.1.1",
        "client-zip": "^2.4.5",
        "color-convert": "^2.0.1",
        "cookie": "^0.6.0",
        "dayjs": "^1.11.10",
        "file-type": "^19.0.0",
        "floating-vue": "^5.2.2",
        "form-data": "^4.0.0",
        "geojson": "^0.5.0",
        "grid-layout-plus": "^1.0.5",
        "just-clone": "^6.2.0",
        "maplibre-gl": "^3.6.2",
        "markdown-it": "^14.1.0",
        "maska": "^2.1.11",
        "pinia": "^2.0.23",
        "roboto-fontface": "*",
        "uuid": "^9.0.1",
        "vee-validate": "^4.12.2",
        "vue": "^3.4.0",
        "vue-i18n": "^9.8.0",
        "vue-markdown-render": "^2.1.1",
        "vue-query": "^1.26.0",
        "vue-router": "^4.4.3",
        "vue3-easy-data-table": "^1.5.47",
        "vue3-perfect-scrollbar": "^1.6.1",
        "vuetify": "^3.7.1",
        "vuetify-sonner": "^0.3.12"
    },
    "devDependencies": {
        "@babel/types": "^7.21.4",
        "@types/color-convert": "^2.0.3",
        "@types/markdown-it": "^14.0.1",
        "@types/node": "^18.15.0",
        "@types/uuid": "^9.0.7",
        "@typescript-eslint/eslint-plugin": "^6.13.1",
        "@typescript-eslint/parser": "^6.13.1",
        "@vitejs/plugin-vue": "^4.0.0",
        "@vitejs/plugin-vue-jsx": "^3.1.0",
        "@vue/eslint-config-typescript": "^11.0.0",
        "dotenv": "^16.3.1",
        "dotenv-cli": "^7.3.0",
        "dprint": "^0.43.1",
        "eslint": "^8.54.0",
        "eslint-import-resolver-alias": "^1.1.2",
        "eslint-import-resolver-typescript": "^3.6.1",
        "eslint-plugin-import": "^2.29.1",
        "eslint-plugin-vue": "^9.19.2",
        "sass": "^1.69.5",
        "stripe": "^15.10.0",
        "type-fest": "^4.9.0",
        "typescript": "^5.4.5",
        "unplugin-fonts": "^1.0.3",
        "vite": "^5.0.11",
        "vite-plugin-checker": "^0.6.4",
        "vite-plugin-vuetify": "^2.0.1",
        "vue-tsc": "^1.2.0"
    }
}

Steps to reproduce

Upgrade extension to v2.1.4

What is expected?

That global augmented propeties work

What is actually happening?

They don't.

Link to minimal reproduction

No response

Any additional comments?

declare module 'vue' {
   export interface ComponentCustomProperties {
        $filters: {
            number: typeof formatNumber;
            percent: typeof formatPercent;
            currency: typeof formatCurrency;
            pluralize: typeof pluralize;
            abbreviate: typeof abbreviateNumber;
            date: typeof formatDate;
            bytes: typeof prettyBytes;
            timeSpan: typeof formatTimespan;
            timeDays: typeof formatTimespanDays;
        };
        $can: UserAbility['can'];
        $canExclusive: UserAbility['canExclusive'];
        $hasAtLeastRole: UserAbility['hasAtLeastRole'];
        $notImplemented: (name: string) => void;
        $triggerDialog: typeof dialogsEventBus.emit;
    }
}

[douglasg14b]

This seems similar to: #3947

[douglasg14b]

Also noticing that this now fails in build as well, so it's not just an issue with the language tools? Something different with a Vue update?

Looks like a patch versionof vue requires vue-tsc to upgrade to ^2.0.22.

---

However, after upgrading builds no longer work with vite:

error when starting dev server:
Error: Cannot find module 'vue-tsc/out/index'

---

After upgrading vite and vite-plugin-checker:

node:internal/event_target:1088
  process.nextTick(() => { throw err; });
                           ^
TypeError [Error]: Cannot read properties of undefined (reading 'useCaseSensitiveFileNames')
    at Object.proxyCreateProgram (C:\Users\[snip]\Documents\01 Programming\02 Contracts\[snip]-app\node_modules\.pnpm\@volar+typescript@2.4.1\node_modules\@volar\typescript\lib\node\proxyCreateProgram.js:33:68)
    at C:\Users\[snip]\Documents\01 Programming\02 Contracts\[snip]-app\node_modules\.pnpm\vite-plugin-checker@0.7.2_eslint@8.56.0_typescript@5.4.5_vite@5.4.2_vue-tsc@2.1.4\node_modules\vite-plugin-checker\dist\cjs\checkers\vueTsc\typescript-vue-tsc\lib\typescript.js:120483:225
    at Object.<anonymous> (C:\Users\[snip]\Documents\01 Programming\02 Contracts\[snip]-app\node_modules\.pnpm\vite-plugin-checker@0.7.2_eslint@8.56.0_typescript@5.4.5_vite@5.4.2_vue-tsc@2.1.4\node_modules\vite-plugin-checker\dist\cjs\checkers\vueTsc\typescript-vue-tsc\lib\typescript.js:190858:3)

---

After finding this random comment that states that vue-tsc may ahve hidden TS min-verison requirements, I upgraded TS to v5.5.x. WHich resolved the above, and generated new errors:

node:internal/event_target:1088
  process.nextTick(() => { throw err; });
                           ^
TypeError [Error]: pluginContext.vueCompilerOptions.plugins is not iterable
    at createPlugins (C:\Users\[snip]\Documents\01 Programming\02 Contracts\[snip]-app\node_modules\.pnpm\@vue+language-core@2.1.4_typescript@5.5.4\node_modules\@vue\language-core\lib\plugins.js:48:45)
    at Object.createVueLanguagePlugin (C:\Users\[snip]\Documents\01 Programming\02 Contracts\[snip]-app\node_modules\.pnpm\@vue+language-core@2.1.4_typescript@5.5.4\node_modules\@vue\language-core\lib\languagePlugin.js:52:49)

---

After finding yet another comment (Thank god these repos don't drive people to information black holes like discord) that advised pinning vue-tsc to 2.0.29 I can now build again finally.

---

Unfortunately after this whole depressing saga, global properties STILL fail to compile. So it's still skuffed after updating apparently as close to latest as possible.

---

Also apparently various other things are broken as well like like typings for things like defineEmits and defineProps?

Looks like this is also skuffed:

---

Alright, after adding "types": ["./src/types.d.ts"] to my tsconfig the issues with defineEMits, vue module...etc have vanished. (How in the world has this been fine for nearly a year up till now?). However, the issue with ComponentCustomProperties still persists 😥

Related threads:

• Property '$route' does not exist on type nuxt/nuxt#28373
• Property X does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>> nuxt/nuxt#28707
• error with vue-tsc 2.0.29 nuxt/nuxt#28440
  • Fix PR? https://github.com/nuxt/nuxt/pull/28446/files
  • The fix for this is weird, augmenting against the Vue doc recommendations? Tried it regardless, didn't work.
• Potentially related pr? propagate ComponentCustomOptions through ComponentCustomBase (fix #2332) router#2333

[douglasg14b]

This also seems to be a problem for vue-router as well as $route is also not available in templates.

[KazariEX]

Due to our past use of @vue/runtime-core to augment Vue, this caused breaks in augmentation of vue. We are now gradually standardizing the use of vue for augmentation across other libraries. If this issue still occurs in your dependencies, you can temporarily switch to vue and make a PR to the upstream repository.

[douglasg14b]

Related? #4755

@KazariEX Sorry, I don't understand. This did not appear to be a problem in earlier versions, however it is a problem now. Due to some combination of dependencies & breaking changes this has regressed. If I knew how to fix it, I would have 😅

Can you clarify?

[KazariEX]

Anyway, I suggest that you first bump all your dependencies to the latest version, and try searching for declare module '@vue/runtime-core' in the node_modules directory. If you find any libraries using it to augment Vue, modify it to declare module 'vue'.

If the issue persists after making these changes, I believe we need a minimal reproduction to pinpoint the root cause of the problem.

[codeblockhead]

I have also encountered this issue on the latest version of nuxt. Only in the template, the vscode plugin cannot correctly recognize the automatically exported functions. I don't know where the source of the problem is, and whether it is due to the vscode plugin

[Bombastickj]

Here is a minimal reproduction to highlight the error coming in nuxt 3. @KazariEX

https://stackblitz.com/edit/github-vw7ht4?file=nuxt.config.ts

[douglasg14b]

So, for others here the guidance appears to be this:

Any library that use the legacy syntax declare module '@vue/runtime-core' will absolutely brick your applications type resolution for ComponentCustomProperties

To find these dependencies and fix them:

1. Open node-modules
2. Do a global search for `'@vue/runtime-core'``
3. Any dependencies that do this, try and upgrade to latest within your major

If any of these dependencies don't have updates, or are abandoned, then based on what I've learned here and in debugging your are screwed, and so is your CI/CD pipeline. You would need to do global find & replace before any builds, and locally.

Edit: Or make PRs to the relevant projects, assuming they are active.

[andreasgangso]

If any of these dependencies don't have updates, or are abandoned, then based on what I've learned here and in debugging your are screwed, and so is your CI/CD pipeline. You would need to do global find & replace before any builds, and locally.

Or make PRs to the libraries you use. While waiting for it to get merged you can point towards your own fork in package.json.

[aiqin-bao]

I did not upgrade nuxt. I just switched from npm to pnpm and reinstalled the dependencies. It was solved. It should be a problem of dependencies version. but I don't know which dependencies