error TS2430: Interface 'WebGLRenderingContext' incorrectly extends interface 'WebGLRenderingContextBase'

Question

When I run tsc it gives me this error output:

../../../AppData/Roaming/npm/node_modules/typescript/lib/lib.dom.d.ts(15340,11): error TS2430: Interface 'WebGLRenderingContext' incorrectly extends interface 'WebGLRenderingContextBase'.
  Types of property 'getExtension' are incompatible.
    Type '{ (name: "ANGLE_instanced_arrays"): ANGLEInstancedArrays; (name: "EXT_blend_minmax"): EXTBlendMinMax; (name: "EXT_color_buffer_half_float"): EXTColorBufferHalfFloat; (name: "EXT_frag_depth"): EXTFragDepth; (name: "EXT_sRGB"): EXTsRGB; (name: "EXT_shader_texture_lod"): EXTShaderTextureLOD; (name: "EXT_texture_filter_...' is not assignable to type '{ (extensionName: "EXT_blend_minmax"): EXT_blend_minmax | null; (extensionName: "EXT_texture_filter_anisotropic"): EXT_texture_filter_anisotropic | null; (extensionName: "EXT_frag_depth"): EXT_frag_depth | null; (extensionName: "EXT_shader_texture_lod"): EXT_shader_texture_lod | null; (extensionName: "EXT_sRGB"): EX...'.
      Types of parameters 'name' and 'extensionName' are incompatible.
        Type '"OES_vertex_array_object"' is not assignable to type '"ANGLE_instanced_arrays"'.

My tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "rootDir": "src",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": true
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

tsc is version Version 3.1.3.

Here is my package.json:

{
  "name": "pupp-tf-test",
  "version": "0.0.1",
  "description": "Try to get environment set up to program using TypeScript, Puppeteer, and TensorFlow.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "xiaodeaux",
  "license": "ISC",
  "dependencies": {
    "@tensorflow/tfjs-node-gpu": "^0.1.18"
  },
  "devDependencies": {
    "@types/node": "^10.12.0"
  }
}

The the only .ts file I have is empty. So this has nothing to do with the code in the file because there is none. At least I assume it has nothing to do with that specific file.

Also, I'm on Windows 10 and using Visual Studio Code. Here's vscode environment info:

Version: 1.28.1 (user setup)
Commit: 3368db6750222d319c851f6d90eb619d886e08f5
Date: 2018-10-11T18:13:53.910Z
Electron: 2.0.9
Chrome: 61.0.3163.100
Node.js: 8.9.3
V8: 6.1.534.41
Architecture: x64

Answer 1

According @tafsiri on tfjs issue: Compile error with @tensorflow/tfjs-backend-webgl the issue is: "caused by a clash between the now built in types for webgl and the @types/webgl2 package we currently use".

He gives the next solution (that worked for me):

• Edit you file tsconfig.json and add the option skipLibCheck

  {
    "compilerOptions": {
      ...
      // skip error: Interface 'WebGL2RenderingContext' incorrectly extends interface 'WebGL2RenderingContextBase'.
      // https://github.com/tensorflow/tfjs/issues/4201
      "skipLibCheck": true
    },
    ...
  }
  

Answer 2

It looks like the @types/webgl-ext package (an indirect dependency of @tensorflow/tfjs-node-gpu) contains a declaration of the getExtension method of WebGLRenderingContext that is incompatible with the declaration of the getExtension method of WebGLRenderingContextBase in recent versions of the TypeScript standard library. I'm not sure what should be done about this, so I suggest you first file an issue against @types/webgl-ext. If you don't get an answer there, then you could escalate to TensorFlow.js support resources to ask if the dependency on a broken and apparently unmaintained package can be removed.

In the meantime, a workaround that may work is to create your own dummy version of the @types/webgl-ext package that is empty. Create a directory in your project to hold the dummy package (for example, suppose you name the directory webgl-ext), copy the package.json from the real @types/webgl-ext package, create an empty index.d.ts file, and then register the dummy package in your main package.json using a relative path:

  "dependencies": {
    "@tensorflow/tfjs-node-gpu": "^0.1.18",
    "@types/webgl-ext": "./webgl-ext"
  },