TypeScript + VSCode's Vetur Vue package: Cannot find name 'HTMLElement' / 'window' / 'document'

Question

I have been researching this minor Vetur issue I am seeing - and have seen a few answers around modifications to the tsconfig for Vue3 + ts + Vetur - but most seem to be dead ends right now as I either already have the suggested fix in my tsconfig or the suggested fixes aren't quite helping with the warnings I'm seeing.

I have tried adding the dom, es2016 and dom.iterable lib packages, but none have worked. I'm probably thinking there is a clash or a conflict with something else in my tsconfig, but can't seem to narrow it down to anything conclusive.

I've also tried the cmd+shitf+p then Developer: Reload window trick, that didn't work. Restarted VSCode, that didn't work.

I essentially see generic Vetur errors such as:

"Cannot find name window", "Cannot find name document", "Cannot find name HTMLElement" and "Cannot find name HTMLCanvasElement".

Here is my full tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "es2016",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

N.B. I've added vuejs3 as a tag for this question as although this isn't a Vue problem as such, the Vetur library is Vue tooling for VS Code.

Answer 1

Ok, so this was a weird one. It looks like Vetur has an issue with multiple project directories open in one VSCode workspace, and subsequently not recursing to find the tsconfig.json file.

It expects it to be in the root which to be honest I think is reasonable, but also unreasonable at the same time...