Why am I still getting types from lib.dom.d.ts when I have overridden the lib property in my tsconfig to omit the dom lib?

Question

I'm having an issue where I'm trying to compile a TypeScript Node project without DOM types, but TypeScript keeps including the DOM types. Here is my tsconfig.json:

{
    "compilerOptions": {
        "lib": [
            "ES6"
        ],
        "target": "es6",
        "module": "commonjs",
        
        "declaration": true,
        "outDir": "./dist",
        "rootDir": "./src",
        "strict": true,
        "esModuleInterop": true,
    }
}

As you can see, I am using "lib": ["ES6"] which is suppose to get rid of the DOM types. Using tsc --showconfig I can verify that this is the config that I am using. However, VSCode's IntelliSense allows me to write out types for the HTML elements, and, on compilation, I get an error talking specifically about a clash with a type in lib.dom.d.ts, even though the tsconfig is suppose to exclude them (the ellipses are my own):

node_modules/@types/webgl2/index.d.ts:582:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'WebGL2RenderingContext' must be of type (...), but here has type (...).

582 declare var WebGL2RenderingContext: {
                ~~~~~~~~~~~~~~~~~~~~~~

  C:/Users/username/AppData/Roaming/npm/node_modules/typescript/lib/lib.dom.d.ts:16316:13
    16316 declare var WebGL2RenderingContext: {
                      ~~~~~~~~~~~~~~~~~~~~~~
    'WebGL2RenderingContext' was also declared here.

How can the two definitions of WebGL2RenderingContext clash if I am excluding DOM types in my tsconfig?

Answer 1

We were running into the same problem. While it may be a different culprit in your case, here is how you could narrow it down:

Create an empty project, take your tsconfig.json and use a minimal code snippet that works only if lib.dom.d.ts is in scope like:

// This works in a browser, but should fail to compile for nodejs, because in
// nodejs, and explicit import is needed.
const time = performance.now();

If this fails to compile you know that your tsconfig.json is good in general.

Now slowly bring in third partly dependencies, i.e., start npm-installing the dependencies that you had in your "broken" project one-by-one, until you reach the point were the compilation suddenly passes.

In our case the problematic dependency was @types/supertest, which in turn had pulled in @types/superagent. The problem with @types/superagent is that it contains the triple slash directive:

/// <reference lib="dom" />

This seems to have the effect that lib.dom.d.ts gets included into the compilation, effectively overriding the "lib": ["ES6"] you have in your tsconfig.json.

Perhaps you can also find the culprit more quickly by specifically looking for that line in your dependencies.

I still don't have a good answer though how to deal with the problem. Clearly installing a dependency should not result in letting the compilation silently pass on cases that should be a compilation error in a non-browser context. I have opened an issue on the TypeScript repo to see if this can be fixed, and there's another issue opened for @types/superagent.

Answer 2

All @types packages from your package.json are included by default in the project when the "types" compiler option isn't specified.

In this case the error message shows you have @types/webgl2 installed, and you did not specify which types to include, so it included all types by default.

If you'd like to exclude all types you'd set the following in tsconfig.json:

{
  // ...

  "compilerOptions" : {
    // ...

    "types": [],

    // ...
  }
}

And as always with Typescript, after making config changes make sure to reboot the Language Server using the "Restart Typescript Server" command (press F1 in VSCode).