"Cannot find name" and other problems with TypeScript-SFC

[jankal]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: Win 10
• Vetur version: 0.22.1
• VS Code version: 1.37.0

Problem

Vetur underlines everything and gives errors like Cannot find name all the time.

Reproducible Case

At the moment I'm not sure how to make a reproducible case. The project is closed source and I'm not the author of most of the code. I mostly hope, that someone has seen this behaviour before.

[ktsn]

Are you enabling experimental template interpolation service? In that case what do you see when you execute Vetur: show corresponding virtual file and source map command?

[jankal]

@ktsn vetur.experimental.templateInterpolationService: true is not used in my config. I didn't even know this existed yet.

This is the output of Vetur: Show corresponding virtual file and sourcemap:

====================
Virtual content of c:\Users\alexa\Projekte\xqweb\roma-etk\assets\node_modules\@enhavo\svg-editor\Components\ApplicationComponent.vue.template
Hover, semantic diagnostics, jump to definition and find references are run on this file.
====================



====================
SourceMap
from: c:\Users\alexa\Projekte\xqweb\roma-etk\assets\node_modules\@enhavo\svg-editor\Components\ApplicationComponent.vue
to  : c:\Users\alexa\Projekte\xqweb\roma-etk\assets\node_modules\@enhavo\svg-editor\Components\ApplicationComponent.vue.template
[VueFileStart, VueFileEnd, VueFileText] => [TSVirtualFileStart, TSVirtualFileEnd, TSVirtualFileText]
====================

[ktsn]

That's strange because the errors looks only happens on template interpolation service. Could you try to produce it in available source code for us so that we can work on it? (e.g. extract culprit file, make the source code minimal to open etc.)

[ktsn]

@jankal I'm just looking #1451 which is possibly related to this issue. Is your problematic file in node_modules?

[msamsel]

@ktsn I hope this description will help you track down the error.

Same issue here. The way how I was able to make such error.
VSCode: version: 1.47.1
Vetur: 0.24.0
MacOS: 10.15.5

1. Open VSCode and create new file with button in on left file tree:
   
2. Name file with anything.Vue important part is to start extension with a capital letter.
3. VSCode will start to produce single error on the closing character of </template> tag:
   
4. Rename file (inside VSCode) to small later extension anything.vue
5. Fully close and open VSCode again
6. Open file with small letter extension.
   
7. Please notice that Vetur error still see file as test.Vue not test.vue as it is an actual name of the file. It looks like something somewhere is cached.

[jankal]

@ktsn Sorry for not having responded yet. The file wasn't in node_modules. I've not experienced this behaviour in other projects since then. Maybe @msamsel is on the right track here.

[Tehsurfer]

@msamsel's description is exactly what happened to me.

I tried deleting and recreating the file but still have the same error.

I've now switched to vscode-vue which seems to be working.

[KVINTH]

Just encountered this issue as well, same situation as @msamsel

Steps taken to address:

1. renamed File.Vue to File.vue (did not work)
2. created NewFile.vue and copied code from File.vue over
3. deleted File.vue
4. renamed NewFile.vue to File.vue

[legendarylion]

Yeah + 1 for @msamsel's description. Same for me. Renaming the file is fine - try to name it back, get smacked in the face with a wall of red (even though everything looks legit).

[msamsel]

@yoyo930021 do you think, provided description is sufficient to make a bug report from it?

[yoyo930021]

@yoyo930021 do you think, provided description is sufficient to make a bug report from it?

It's ok. I will try to study it.

[shunyue1320]

solution

[Tehsurfer]

solution

This works for me.

(it's in file>preferences>settings>extensions>vuetr if you are wondering)

Will we lose any functionality by disabling the js/ts validation though?

[shunyue1320]

solution

This works for me.

(it's in file>preferences>settings>extensions>vuetr if you are wondering)

Will we lose any functionality by disabling the js/ts validation though?

Syntax errors in <script> will not be displayed!

[Tehsurfer]

They seem to still be displayed for me... must be my linter

[Alpakash]

Stumbled upon the same problem @msamsel described, I also tried what @KVINTH suggested. Didn't work for me. Just renamed the file for now and will follow this issue.

[d18n]

Ran into the same issue that @msamsel described as well, seems like it might be an issue with vs code and not Vetur. I tried to run Vetur: Show corresponding virtual file and sourcemap but I got an error saying that it 'Failed to show virtual file. Make sure the current file is a .vue file.'

Debugging the extension it looks like vscode.window.activeTextEditor.document.fileName holds on to the old file name with the incorrect casing, seems like vs code is caching this somewhere and not letting go of it when you rename a file but only change character casing. Pretty lame solution, but I ended up copying the contents of the file, made sure I did not have the file open in my instance of vs code, then ran:
Clear Editor History
File: Clear Recently Opened
Search: Clear Search
Search: Clear Search History

Then pressed Ctrl+P and started typing the name of the file to ensure that all references to the old improperly cased file were gone. Somehow the file was still there so I ended up pressing the 'X' to the right of the result to manually remove it from my recently opened files. Closed VS Code, deleted the file, re-opened vscode, created a new file with the same name but correct casing, and copied in the contents of the old file.

[quroom]

@d18n Thanks. This solution works for me.

[rahicks26]

Not sure if this is related or not, but it feels related.

In a vue 2 project I am making some updates to I noticed that vetur will sometimes not find the correct method when I use '@' instead of 'v-on:'. It appears to be one character off on the name. Here is an example:

Now to make things even odder if you move it the line the tag starts on the issue goes away:

This seems a bit more specific then the original post, but I wasn't sure if it might be related or not.

After a bit more work on this project we noticed that this does not happen when the handler is passed by name. For example: @click="onClick" does not seem to trigger the issue at all.

[octref]

@rahicks26 #1319, it's fixed but not released yet.

[simone-baldini]

Hi,
I've created an app with vue, vuetify and typescript language but I get this error:
Cannot find name 'process'. Do you need to install type definitions for node? Try npm i @types/node.

my package.json is below:

{
"name": "vue-test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@types/node": "^14.14.7",
"axios": "^0.21.0",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2",
"vue-router": "^3.2.0",
"vuetify": "^2.2.11",
"vuex": "^3.4.0"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-airbnb": "^5.0.2",
"@vue/eslint-config-typescript": "^5.0.2",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "^7.1.0",
"node-sass": "^4.12.0",
"sass": "^1.19.0",
"sass-loader": "^8.0.2",
"typescript": "~3.9.3",
"vue-cli-plugin-vuetify": "~2.0.7",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
}
}

If I disable vetur js validation no problem is reported but I don't know if that can produce any collateral issue.
Can you help me?

[Red-Asuka]

The same problem bothers me, I disable vetur js validation, but I think this is not a good solution.

[declarationperfume]

Same issue happening on Vetur 0.31.3
Solution by @d18n works.

[yoyo930021]

Can anyone provide repro operating system?

[yoyo930021]

I already know the cause of the problem.
But it's hard to solve.
I need more time or refactoring.

[Guinous]

Hello,

I was able to solve this problem by clearing vs cache in the following paths :
C:\Users\[UserName]\AppData\Roaming\Code\Cache
C:\Users\[UserName]\AppData\Roaming\Code\CacheData

It was a desperate action. May not be the correct thing to do but other given solutions did not work for me.

[declarationperfume]

Can anyone provide repro operating system?

Windows 10 Pro 19042.746
VSCode 1.52.1

[DaveTorrey]

I tried deleting just the cache from appdata as recommended above, also tried clearing history in vscode itself and it still didn't work.

Once I deleted the cache for all extensions and workspaces it seemed to finally clean up.

[SimenRomstad]

Just encountered this issue as well, same situation as @msamsel

Steps taken to address:

1. renamed File.Vue to File.vue (did not work)
2. created NewFile.vue and copied code from File.vue over
3. deleted File.vue
4. renamed NewFile.vue to File.vue

I want to add that this worked for me once. Second time I did this to fix the issue:

1. Uninstall Vetur
2. Completly delete Vetur's folder in the extensions install folder: "Windows %USERPROFILE%. vscode\extensions"
3. Install Vetur

[MiniKiwiNZ]

I encountered this issue this morning so hopefully this helps someone.
I found two ways to fix this:

The easy way

1. Go to %appdata%\Code\User\workspaceStorage
2. Find which folder relates to the affected project - I did this using the last modified time
3. Close VSCode
4. Delete the folder
5. Reopen VSCode

The hard way (and a deeper look into what's going on under the hood)

1. Close all editor tabs except the affected one and then close VSCode
2. Go to %appdata%\Code\User\workspaceStorage
3. Find which folder relates to the affected project - I did this using the last modified time
4. Back this folder up
5. Go into the folder and open the state.vscdb file with a SQLite browser (I did this using DB Browser for SQLite)
6. Find the memento/workbenches.parts.editor key
7. Locate inside its JSON value the path information for the affected file
8. Change the three instances that the capitalized/malformed extension appears in this JSON to be the correct extension
9. Save the database changes
10. Reopen VSCode

The encoded JSON inside the value looks something like this where <path> is the path to your affected file:

{
  "resourceJSON": {
    "$mid": 1,
    "fsPath": "<path>\\Test.Vue",
    "_sep": 1,
    "external": "file:///<path>/Test.Vue",
    "path": "/<path>/Test.Vue",
    "scheme": "file"
  },
  "preferredResourceJSON": {
    "$mid": 1,
    "fsPath": "<path>\\Test.vue",
    "_sep": 1,
    "external": "file:///<path>/Test.vue",
    "path": "/<path>/Test.vue",
    "scheme": "file"
  },
  "encoding": "utf8"
}

Internally, VSCode still holds a reference to the incorrectly named file, and correcting those references seems to resolve the issue.
Nothing else in this thread worked for me except those two methods, and once the first one worked, I wanted to understand what the issue was.
The state.vscdb file is a SQLite 3 format database.

[yoyo930021]

It is expected that the problem will be solved in #2800 and #2801

[vijay-singh-16]

I am able to reliably workaround this issue by keeping the 'typescript' version under '4.5.x' in dev dependencies.
If typescript version is not below 4.5.x this issue occurs.
So I make my package.json look like this:

{
  "name": "aaaa",
  .,
  .,
  "dependencies": {
    .,
    .,
    .
  },
  "devDependencies": {
    .,
    .,
    .,
    "typescript": "~4.4.0",
    .,
    .,
    .
  },
  "license": "Unlicense"
}

then run yarn\npm install, restart vs-code and the issue goes away.

[chris-straka]

In case anyone has the same issue I was having, I kept trying to do this

export default {
  data() {},
  methods: {}
  // etc...
}

When I think I should've been doing this...

import { defineComponent } from "vue";
export default defineComponent({
  data() {},
  methods: {}, 
  // etc...
})

[arika163]

I encountered this issue this morning so hopefully this helps someone. I found two ways to fix this:

The easy way

1. Go to %appdata%\Code\User\workspaceStorage
2. Find which folder relates to the affected project - I did this using the last modified time
3. Close VSCode
4. Delete the folder
5. Reopen VSCode

The hard way (and a deeper look into what's going on under the hood)

1. Close all editor tabs except the affected one and then close VSCode
2. Go to %appdata%\Code\User\workspaceStorage
3. Find which folder relates to the affected project - I did this using the last modified time
4. Back this folder up
5. Go into the folder and open the state.vscdb file with a SQLite browser (I did this using DB Browser for SQLite)
6. Find the memento/workbenches.parts.editor key
7. Locate inside its JSON value the path information for the affected file
8. Change the three instances that the capitalized/malformed extension appears in this JSON to be the correct extension
9. Save the database changes
10. Reopen VSCode

The encoded JSON inside the value looks something like this where <path> is the path to your affected file:

{
  "resourceJSON": {
    "$mid": 1,
    "fsPath": "<path>\\Test.Vue",
    "_sep": 1,
    "external": "file:///<path>/Test.Vue",
    "path": "/<path>/Test.Vue",
    "scheme": "file"
  },
  "preferredResourceJSON": {
    "$mid": 1,
    "fsPath": "<path>\\Test.vue",
    "_sep": 1,
    "external": "file:///<path>/Test.vue",
    "path": "/<path>/Test.vue",
    "scheme": "file"
  },
  "encoding": "utf8"
}

Internally, VSCode still holds a reference to the incorrectly named file, and correcting those references seems to resolve the issue. Nothing else in this thread worked for me except those two methods, and once the first one worked, I wanted to understand what the issue was. The state.vscdb file is a SQLite 3 format database.

In my case, my editor showed me an error with "already include file name ....",and this method works a lot ,thanks!

[msamsel]

@chris56974 I think you have just a syntax error and you should type this.foo instead of foo. You type stuff inside <script> not in <template> so this is required to reference component's stuff.

[chris-straka]

@msamsel thanks for the catch. I'm not sure why I wrote a syntax error in my example 😂. I've revised it to better reflect the point I intended to make, which is that "typescript users should use defineComponent for typescript to properly infer types inside the component" - vue3 TS docs.

I think I was getting an error at the time and switching to defineComponent fixed the error I was getting. It was a while ago though and I don't remember haha. My apologies for anyone who found my original example confusing.

[pramitsawant]

I'm facing the same issue with the Volar extension

[mmshooreshi]

1. Disable "Vetur > Validation > Interpolation" from the vscode settings.

2. If you also have this error: "Cannot find name ... .ts" --> Disable "Vetur > Validation > Script"

3. Close your .vue file (saving the file won't affect the errors. you must close the .vue file and then reopen it"

If you still have the errors:

4. Make sure your .tsconfig has "jsx": "preserve" inside the compilerOptions

5. Also make sure that you have provided the true path for the "#app"
   both of the following examples are working:

tsconfig.json working

{
  // https://v3.nuxtjs.org/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"],
      "#app": [
        "./node_modules/nuxt/dist/app/index"
      ]
    }
  }
}

tsconfig.json working

{
  // https://v3.nuxtjs.org/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

FINALLY --> 6. Again: Do Step 3