False errors due to off-by-one-character in identifiers or types

[2-5]

Volar 0.40.5

I get frequent false errors due to Volar complaining about invalid identifiers due to off-by-one-character errors, like in the screenshot:

The fix is to restart VS Code, closing and reopening the source file with the reported false error doesn't work due to some form of cache.

Other example that happend: complaining about unknown type nboolean instead of boolean which is in source code.

[johnsoncodehk]

Since v0.40.2 we have handle incremental update logic in language server for support incremental parser and resolve diagnosis display flicker (#1718), it should be the reason. Please let me know if you can reproduce this problem stably and how.

After v0.40.6 you can setting "volar.vueserver.textDocumentSync": "full" to disable incremental update.

[Sun-ZhenXing]

Same problem. In recent updates, this has become more common. I hope it will be solved soon.
Restarting VS Code has been difficult to fix and I keep getting a lot of errors in the <template> element that actually compile fine.

[johnsoncodehk]

@Sun-ZhenXing can you reproduce this problem in https://github.com/johnsoncodehk/volar-starter?

[Sun-ZhenXing]

@Sun-ZhenXing can you reproduce this problem in https://github.com/johnsoncodehk/volar-starter?

@johnsoncodehk

VS Code:

Version: 1.70.2 (user setup)
Commit: e4503b30fc78200f846c62cf8091b76ff5547662
Date: 2022-08-16T05:35:13.448Z
Electron: 18.3.5
Chromium: 100.0.4896.160
Node.js: 16.13.2
V8: 10.0.139.17-electron.0
OS: Windows_NT x64 10.0.19044

Volar:

Name: Vue Language Features (Volar)
Id: Vue.volar
Description: Language support for Vue 3
Version: 0.40.7
Publisher: Vue
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Vue.volar

I followed the steps below (Windows_NT 10x in cmd.exe):

# (cd34100)
git clone https://github.com/johnsoncodehk/volar-starter
cd volar-starter
pnpm i
#    ╭──────────────────────────────────────────────────────────────────╮
#    │                                                                  │
#    │                Update available! 7.9.5 → 7.11.0.                 │
#    │   Changelog: https://github.com/pnpm/pnpm/releases/tag/v7.11.0   │
#    │                Run "pnpm add -g pnpm" to update.                 │
#    │                                                                  │
#    │      Follow @pnpmjs for updates: https://twitter.com/pnpmjs      │
#    │                                                                  │
#    ╰──────────────────────────────────────────────────────────────────╯

#  WARN  deprecated @types/vfile-message@2.0.0: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.try.npmmirror.com/typescript/4.8.2: 1.62 MB/11.9 MB
# Packages: +349
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  
# Packages are hard linked from the content-addressable store to the virtual store.
#   Content-addressable store is at: F:\.pnpm-store\v3
pnpm run dev

# > volar-starter@0.0.0 dev F:\WorkSpace\volar-starter
# > vite


#   VITE v3.1.0  ready in 2020 ms

#   ➜  Local:   http://127.0.0.1:5173/
#   ➜  Network: use --host to expose
#   ➜  Inspect: http://127.0.0.1:5173/__inspect/

Create src/components/AnimItem.vue:

<script setup lang="ts">

import { ref } from 'vue'

class Tag {
  name: string
  id: string
  tag_type: string
  constructor(id: string, name: string) {
    this.id = id
    this.name = name
    this.tag_type = 'anim'
  }
}

const tag = ref<Tag>(new Tag('3efa5d77', 'My World'))

</script>

<template>
  <div class="box c-hand">
    <div class="flex-center">
      <img src="/favicon.ico" :alt="tag.name">
      <span class="text-center text-tiny text-ellipsis">{{ tag.name }}</span>
    </div>
  </div>
</template>

Typing the above code has resulted in 6 errors:

[{
    "resource": "/f:/WorkSpace/volar-starter/src/components/AnimItem.vue",
    "owner": "_generated_diagnostic_collection_name_#0",
    "code": "1128",
    "severity": 8,
    "message": "Declaration or statement expected.",
    "source": "ts",
    "startLineNumber": 18,
    "startColumn": 1,
    "endLineNumber": 18,
    "endColumn": 3
},{
    "resource": "/f:/WorkSpace/volar-starter/src/components/AnimItem.vue",
    "owner": "_generated_diagnostic_collection_name_#0",
    "code": "2304",
    "severity": 8,
    "message": "Cannot find name 'script'.",
    "source": "ts",
    "startLineNumber": 18,
    "startColumn": 3,
    "endLineNumber": 18,
    "endColumn": 9
},{
    "resource": "/f:/WorkSpace/volar-starter/src/components/AnimItem.vue",
    "owner": "_generated_diagnostic_collection_name_#0",
    "code": "1003",
    "severity": 8,
    "message": "Identifier expected.",
    "source": "ts",
    "startLineNumber": 23,
    "startColumn": 31,
    "endLineNumber": 23,
    "endColumn": 32
},{
    "resource": "/f:/WorkSpace/volar-starter/src/components/AnimItem.vue",
    "owner": "_generated_diagnostic_collection_name_#0",
    "code": "1382",
    "severity": 8,
    "message": "Unexpected token. Did you mean `{'>'}` or `>`?",
    "source": "ts",
    "startLineNumber": 23,
    "startColumn": 46,
    "endLineNumber": 23,
    "endColumn": 47
},{
    "resource": "/f:/WorkSpace/volar-starter/src/components/AnimItem.vue",
    "owner": "_generated_diagnostic_collection_name_#0",
    "code": "18004",
    "severity": 8,
    "message": "No value exists in scope for the shorthand property 'tag'. Either declare one or provide an initializer.",
    "source": "ts",
    "startLineNumber": 24,
    "startColumn": 60,
    "endLineNumber": 24,
    "endColumn": 63
},{
    "resource": "/f:/WorkSpace/volar-starter/src/components/AnimItem.vue",
    "owner": "_generated_diagnostic_collection_name_#0",
    "code": "1005",
    "severity": 8,
    "message": "',' expected.",
    "source": "ts",
    "startLineNumber": 24,
    "startColumn": 63,
    "endLineNumber": 24,
    "endColumn": 64
}]

Change App.vue (only change 2 lines):

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
  {{ $t /* $t(key: "hello"): void */ }}
  <AnimItem></AnimItem>
</template>

<script lang="ts" setup>
import HelloWorld from './components/HelloWorld.vue'
import AnimItem from './components/AnimItem.vue'
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<i18n lang="json">
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界！"
  }
}
</i18n>

Inserting two lines of code into App.vue gives 4 more errors：

[{
    "resource": "/f:/WorkSpace/volar-starter/src/App.vue",
    "owner": "_generated_diagnostic_collection_name_#0",
    "code": "2339",
    "severity": 8,
    "message": "Property '$t' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{}>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & Readonly<...> & Sha...'.",
    "source": "ts",
    "startLineNumber": 4,
    "startColumn": 6,
    "endLineNumber": 4,
    "endColumn": 8
},{
    "resource": "/f:/WorkSpace/volar-starter/src/App.vue",
    "owner": "_generated_diagnostic_collection_name_#0",
    "code": "23",
    "severity": 8,
    "message": "Invalid end tag.",
    "source": "vue",
    "startLineNumber": 6,
    "startColumn": 1,
    "endLineNumber": 6,
    "endColumn": 1
},{
    "resource": "/f:/WorkSpace/volar-starter/src/App.vue",
    "owner": "_generated_diagnostic_collection_name_#0",
    "code": "60",
    "severity": 8,
    "message": "Tags with side effect (<script> and <style>) are ignored in client component templates.",
    "source": "vue",
    "startLineNumber": 8,
    "startColumn": 1,
    "endLineNumber": 11,
    "endColumn": 10
},{
    "resource": "/f:/WorkSpace/volar-starter/src/App.vue",
    "owner": "_generated_diagnostic_collection_name_#0",
    "code": "60",
    "severity": 8,
    "message": "Tags with side effect (<script> and <style>) are ignored in client component templates.",
    "source": "vue",
    "startLineNumber": 13,
    "startColumn": 1,
    "endLineNumber": 22,
    "endColumn": 9
}]

Build Successful, and run OK:

pnpm run build
# > volar-starter@0.0.0 build F:\WorkSpace\volar-starter
# > vue-tsc --noEmit && vite build

# vite v3.1.0 building for production...
# ✓ 22 modules transformed.
# dist/assets/logo.03d6d6da.png    6.69 KiB
# dist/index.html                  0.41 KiB
# dist/assets/index.f915ed7a.css   0.34 KiB / gzip: 0.24 KiB  
# dist/assets/index.295b7f26.js    56.15 KiB / gzip: 22.67 KiB

[johnsoncodehk]

@Sun-ZhenXing I think this is a different problem and it should be fixed in v0.40.8.

[johnsoncodehk]

@2-5 Since I haven't seen other similar reports, I'm guess it may no longer occur, can you try revert volar.vueserver.textDocumentSync setting to and see if this problem reproduce?

[rchl]

I did have it happen in 1.0.7 yesterday in a *.ts file.

[johnsoncodehk]

@rchl It would be very helpful if you can provide the LSP logs that record at the moment the problem occurred.

[2-5]

A few days later I did revert the textDocumentSync setting, to see if the issue was fixed by the new versions of Volar. It seems so, I haven't seen this particular issue since, but at the same time I didn't do any heavy refactorings either (lots of edits in one file) which appeared to have triggered it.

[rchl]

@rchl It would be very helpful if you can provide the LSP logs that record at the moment the problem occurred.

I'm sure it would but I can't reproduce it on demand and once I notice it, I might not have logs reaching far enough for them to be useful.