nuxt: useNuxtApp() helper returns type unknown
Environment
- Operating System: Darwin
- Node Version: v18.0.0
- Nuxt Version: 3.4.1
- Nitro Version: 2.3.3
- Package Manager: yarn@1.22.19
- Builder: vite
- User Config: -
- Runtime Modules: -
- Build Modules: -
- IDE: VSCode 1.77.3
- volar 1.2.0
Reproduction
https://stackblitz.com/edit/github-baumax?file=app.vue
Describe the bug
I registered a helper from the plugin with reference to document
plugins/helllo.ts
export default defineNuxtPlugin(() => {
const hoge = (message: string) => `hello ${message}`;
return {
provide: {
hoge
}
}
})
Later, when I used it in PAGE, the type was unknown.
app.vue
<script setup lang="ts">
const { $hoge } = useNuxtApp();
</script>
<template>
<div>
<h1>
{{ $hoge('msg') }}
</h1>
</div>
</template>
message
'__VLS_ctx.$hoge'' is of type 'unknown' ts(18046)
In practice, however, the helper works. Helper is the same for non-functions Is there a required setting here? Or is it a volar problem?
Additional context
No response
Logs
No response
About this issue
- Original URL
- State: closed
- Created a year ago
- Comments: 39 (7 by maintainers)
this error occurred after VsCode 1.79 update. the issue is related to VsCode TypeScript version.
after 1.79 version typescript version is updated and “Volar” is using the new typesript version. to solve the issue press
Ctrl + Shift + pthen write “Select TypeScript Version” and then choose “Use workspace version”.The problem occurs even without
veturandJavaScript and TypeScript NightlyHas anyone solved the problem in any other way?For me removing
baseURLandpathsfromcompilerOptionsworked.@yasu-s https://nuxt.com/docs/guide/directory-structure/plugins#advanced
The above link solved the problem.
I also had the same problem after vscode 1.79 update. I hadn’t written typescript of nuxt app method in index.d.ts in the past. It should be written after the 1.79 update.
This procedure worked correctly. I had disabled it, but vetur may have been behaving in some way! I then installed and deactivated vetur again and the same thing did not happen Sorry for the trouble.
@danielroe
We have found that installing
JavaScript and TypeScript Nightly (v5.1.20230430)as an extension causes a problem.I was able to get it to work by commenting out the “baseUrl”: “.” setting in tsconfig.json.
The problem is still occuring for me on the latest version of nuxt@3.7.3, even without Vetur involved. The above is the only thing that worked for me.
I found out I had this issue because I manually added
compilerOptions.pathsto my project’stsconfig.json. This seems to have overridden auto-generated configuration from./.nuxt/tsconfig.json. I was able to solve this by adding the wanted configuration through settingtypescript.tsConfig.compilerOptions.pathson thenuxt.config.tsfile.Just encountered the same issue using the sidebase cli for tRPC.
nuxi prepare didn’t help, I don’t have vetur installed, the type is too complex for an index.d.ts, my workspace typescript is already above 5.0, VSCode is at 1.80
Got the same problem and uninstalling vetur also worked. Thanks for posting your solution here @atlansien
We’re currently migrating from Nuxt 2 to Nuxt 3 and we ran into a snag. We found that commenting out all the tsconfig options, except for “extends,” worked for us.
Our configuration also includes
baseURLandpaths.Same problem here, since we upgraded to Nuxt 3.6.5 and TypeScript 5.1.6 we have this problem as well with an
unknowntype for the variables we get out of theuseNuxtAppfunction. Disabling some VSCode extensions like Volar, Nuxtr and builtin TypeScript didn’t work, any ideas what it can be?Changing
#apptonuxt/dist/appandvueto@vue/runtime-corein the index.d.ts file for the project will fix the issue. idk why but I will take it.Same here. Uninstalled Vetur, then relaunched VSCode solved the problem.
You can then use the link provided by @json-jh
I had the same problem with VSCode 1.79.
I had the same problem. Thanks for solving it by removing the extension here. @atlansien
I can’t fix it…
VSCode extensions are