v2.1.4 reports error on global properties although properly augmented #4793

douglasg14b · 2024-09-02T22:21:40Z

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 · 2024-09-02T22:21:58Z

This seems similar to: #3947

douglasg14b · 2024-09-02T22:26:48Z

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\@[email protected]\node_modules\@volar\typescript\lib\node\proxyCreateProgram.js:33:68)
    at C:\Users\[snip]\Documents\01 Programming\02 Contracts\[snip]-app\node_modules\.pnpm\[email protected][email protected][email protected][email protected][email protected]\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\[email protected][email protected][email protected][email protected][email protected]\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\@[email protected][email protected]\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\@[email protected][email protected]\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 · 2024-09-02T23:28:47Z

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

KazariEX · 2024-09-03T03:53:56Z

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 · 2024-09-03T21:59:56Z

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 · 2024-09-04T03:45:18Z

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 · 2024-09-04T11:15:22Z

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 · 2024-09-06T17:30:23Z

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 · 2024-09-07T22:38:53Z

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:

Open node-modules
Do a global search for `'@vue/runtime-core'``
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 · 2024-09-08T10:38:49Z

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 · 2024-09-26T03:31:40Z

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

douglasg14b added the pending triage label Sep 2, 2024

KazariEX added external and removed pending triage labels Sep 3, 2024

KazariEX added the need info label Sep 4, 2024

andreasgangso mentioned this issue Sep 8, 2024

chore: use declare module 'vue' to fix type issues auth0/auth0-vue#419

Merged

FelixNumworks mentioned this issue Sep 13, 2024

TypeError [Error]: pluginContext.vueCompilerOptions.plugins is not iterable quasarframework/quasar#17469

Closed

KazariEX closed this as completed Sep 26, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v2.1.4 reports error on global properties although properly augmented #4793

v2.1.4 reports error on global properties although properly augmented #4793

douglasg14b commented Sep 2, 2024 •

edited

Loading

douglasg14b commented Sep 2, 2024

douglasg14b commented Sep 2, 2024 •

edited

Loading

douglasg14b commented Sep 2, 2024

KazariEX commented Sep 3, 2024

douglasg14b commented Sep 3, 2024 •

edited

Loading

KazariEX commented Sep 4, 2024

codeblockhead commented Sep 4, 2024

Bombastickj commented Sep 6, 2024

douglasg14b commented Sep 7, 2024 •

edited

Loading

andreasgangso commented Sep 8, 2024 •

edited

Loading

aiqin-bao commented Sep 26, 2024 •

edited

Loading

v2.1.4 reports error on global properties although properly augmented #4793

v2.1.4 reports error on global properties although properly augmented #4793

Comments

douglasg14b commented Sep 2, 2024 • edited Loading

Vue - Official extension or vue-tsc version

VSCode version

Vue version

TypeScript version

System Info

package.json dependencies

Steps to reproduce

What is expected?

What is actually happening?

Link to minimal reproduction

Any additional comments?

douglasg14b commented Sep 2, 2024

douglasg14b commented Sep 2, 2024 • edited Loading

douglasg14b commented Sep 2, 2024

KazariEX commented Sep 3, 2024

douglasg14b commented Sep 3, 2024 • edited Loading

KazariEX commented Sep 4, 2024

codeblockhead commented Sep 4, 2024

Bombastickj commented Sep 6, 2024

douglasg14b commented Sep 7, 2024 • edited Loading

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

andreasgangso commented Sep 8, 2024 • edited Loading

aiqin-bao commented Sep 26, 2024 • edited Loading

douglasg14b commented Sep 2, 2024 •

edited

Loading

douglasg14b commented Sep 2, 2024 •

edited

Loading

douglasg14b commented Sep 3, 2024 •

edited

Loading

douglasg14b commented Sep 7, 2024 •

edited

Loading

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

andreasgangso commented Sep 8, 2024 •

edited

Loading

aiqin-bao commented Sep 26, 2024 •

edited

Loading