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

@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.

solution

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...
})

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.

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.

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.

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

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

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).

I’m facing the same issue with the Volar extension

@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.

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.