[v2.2.2] useAttrs type resolution failure

[maxdzin]

Vue - Official extension or vue-tsc version

2.2.2

VSCode version

1.97.2

Vue version

3.5.13

TypeScript version

5.7.3

System Info

System:
    OS: Linux 5.15 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
    CPU: (2) x64 Intel(R) Core(TM) i5-4300U CPU @ 1.90GHz
    Memory: 919.50 MB / 4.81 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    npm: 11.1.0 - ~/.nvm/versions/node/v22.14.0/bin/npm
    pnpm: 10.3.0 - ~/.local/share/pnpm/pnpm
Browsers:
    - (it is WSL)

package.json dependencies

{
  "dependencies": {
    "@nuxt/image": "^1.9.0",
    "nuxt": "^3.15.4",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "typescript": "^5.7.3",
    "vue-tsc": "^2.2.2"
  }
}

Steps to reproduce

1. Navigate to the reproduction.
2. In terminal launch pnpm typecheck.
3. See the error.

What is expected?

Typecheck to be passed without errors.

What is actually happening?

Typecheck is failed with the error:

node_modules/.pnpm/@[email protected]/node_modules/@nuxt/image/dist/runtime/components/NuxtImg.vue:41:7 -
 error TS7022: 'attrs' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

41 const attrs = useAttrs()
         ~~~~~


Found 1 error in node_modules/.pnpm/@[email protected]/node_modules/@nuxt/image/dist/runtime/components/NuxtImg.vue:41


 ERROR  Process exited with non-zero status (2)                                      11:45:44 PM

    at new x (node_modules/.pnpm/[email protected]/node_modules/tinyexec/dist/main.js:440:5)
    at R._waitForOutput (node_modules/.pnpm/[email protected]/node_modules/tinyexec/dist/main.js:548:13)
    at async Object.run (node_modules/.pnpm/@[email protected]/node_modules/@nuxt/cli/dist/chunks/typecheck.mjs:58:7)
    at async runCommand (node_modules/.pnpm/[email protected]/node_modules/citty/dist/index.mjs:337:16)
    at async runCommand (node_modules/.pnpm/[email protected]/node_modules/citty/dist/index.mjs:328:11)
    at async Module.runMain (node_modules/.pnpm/[email protected]/node_modules/citty/dist/index.mjs:466:7) 



 ERROR  Process exited with non-zero status (2)                                      11:45:44 PM

 ELIFECYCLE  Command failed with exit code 1.

Link to minimal reproduction

https://stackblitz.com/edit/github-g74ymcux-eyg4pnvv

Any additional comments?

I encountered this problem with the latest version of vue-tsc in the Nuxt project with nuxt/image module enabled. What is interesting is that typecheck reported an error for this line const attrs = useAttrs() in the NuxtImg.vue component only, while it is seem OK for the same line in the App.vue component (but I assume it is just the same as for useSlots(), when typecheck shows errors randomly, not for all occurrences).

[remake99]

+1 I have same problem too

[KazariEX]

Workaround:

const attrs = useAttrs() as import('vue').SetupContext['attrs']; // Record<string, unknown>

[maxdzin]

@KazariEX yes, similar to useSlots(), it can be a workaround for cases where there is a possibility to change something in the component, but definitely not for the mentioned case. I.e. it cannot be applied for the cases when it cannot be modified in the components somewhere in node_modules.

[KazariEX]

The essence of this problem is that useAttrs will now have template based type inference. But this issue was caused by another problem and has been fixed.

We will introduce some options to control these type inference at a fine-grained level, see #5135.

[KazariEX]

@maxdzin You can use pnpm to patch it as a workaround.

[maxdzin]

@KazariEX Yes, this can probably be used for some urgent things, and, of course, it should be the exception, not the rule, as that's not what this tool is intended for.
Am I understanding correctly that the PR (#5135) you mentioned will solve this problem?

[KazariEX]

You can use it to close the feature that auto type inference for useAttrs, useSlots and so on. If the latter causes the problem of circular references, it will be resolved.

[jiikoosol]

+1, I have the same problem. Using Vue 3.5.13 & Typescript 5.7.3.

[fabis94]

How am I supposed to deal with this, when the issue appears in a third party vue component library in node_modules?

[P4sca1]

Until the fix for@vue/language-core is released, the issue can be resolved by downgrading from @vue/[email protected] to @vue/[email protected]. e.g. using pnpm:

package.json

{
	"pnpm": {
		"overrides": {
			"@vue/language-core": "2.2.0"
		}
	}
}

[KazariEX]

How am I supposed to deal with this, when the issue appears in a third party vue component library in node_modules?

We will disable the all type inference for those special dollar variables by default (opt-in). So we don't need to worry about it.

[fabis94]

When can a fix for this issue be expected?

[KazariEX]

Just wait for the next release.