Compile error with @tensorflow/tfjs-backend-webgl for TS target > ES5

[mceIdo]

System information

• OS Platform and Distribution (e.g., Linux Ubuntu 16.04): Windows 10
• Mobile device (e.g. iPhone 8, Pixel 2, Samsung Galaxy) if the issue happens on mobile device: -
• TensorFlow.js installed from (npm or script link): npm
• TensorFlow.js version: 2.7.0
• CUDA/cuDNN version: -

Describe the problem
When trying to build a typescript code that depends on @tensorflow/tfjs-backend-webgl, if the compilerOptions.target is above ES5 (i.e "ES2015","ES2016","ES2017","ES2018","ES2019","ES2020" or "ESNext"), you get the following compilation errors:

node_modules/typescript/lib/lib.dom.d.ts:16532:11 - error TS2430: Interface 'WebGL2RenderingContext' incorrectly extends interface 'WebGL2RenderingContextBase'.
  Types of property 'clearBufferfv' are incompatible.
    Type '(buffer: number, drawbuffer: number, values: ArrayLike<number> | Float32Array, srcOffset?: number) => void' is not assignable to type '{ (buffer: number, drawbuffer: number, values: Float32List, srcOffset?: number): void; (buffer: number, drawbuffer: number, values: Iterable<number>, srcOffset?: number): void; }'.
      Types of parameters 'values' and 'values' are incompatible.
        Type 'Iterable<number>' is not assignable to type 'ArrayLike<number> | Float32Array'.
          Type 'Iterable<number>' is missing the following properties from type 'Float32Array': BYTES_PER_ELEMENT, buffer, byteLength, byteOffset, and 25 more.

16532 interface WebGL2RenderingContext extends WebGL2RenderingContextBase, WebGL2RenderingContextOverloads, WebGLRenderingContextBase {
                ~~~~~~~~~~~~~~~~~~~~~~

node_modules/typescript/lib/lib.dom.d.ts:16532:11 - error TS2430: Interface 'WebGL2RenderingContext' incorrectly extends interface 'WebGL2RenderingContextOverloads'.
  Types of property 'uniform1fv' are incompatible.
    Type '(location: WebGLUniformLocation, data: ArrayLike<number> | Float32Array, srcOffset?: number, srcLength?: number) => void' is not assignable to type '{ (location: WebGLUniformLocation, data: Float32List, srcOffset?: number, srcLength?: number): void; (location: WebGLUniformLocation, data: Iterable<...>, srcOffset?: number, srcLength?: number): void; }'.
      Types of parameters 'data' and 'data' are incompatible.
        Type 'Iterable<number>' is not assignable to type 'ArrayLike<number> | Float32Array'.
          Type 'Iterable<number>' is not assignable to type 'Float32Array'.

16532 interface WebGL2RenderingContext extends WebGL2RenderingContextBase, WebGL2RenderingContextOverloads, WebGLRenderingContextBase {
                ~~~~~~~~~~~~~~~~~~~~~~

node_modules/typescript/lib/lib.dom.d.ts:16532:11 - error TS2430: Interface 'WebGL2RenderingContext' incorrectly extends interface 'WebGLRenderingContext'.
  Types of property 'uniform1fv' are incompatible.
    Type '(location: WebGLUniformLocation, data: ArrayLike<number> | Float32Array, srcOffset?: number, srcLength?: number) => void' is not assignable to type '{ (location: WebGLUniformLocation, v: Float32List): void; (location: WebGLUniformLocation, v: Iterable<number>): void; }'.
      Types of parameters 'data' and 'v' are incompatible.
        Type 'Iterable<number>' is not assignable to type 'ArrayLike<number> | Float32Array'.
          Type 'Iterable<number>' is not assignable to type 'Float32Array'.

16532 interface WebGL2RenderingContext extends WebGL2RenderingContextBase, WebGL2RenderingContextOverloads, WebGLRenderingContextBase {
                ~~~~~~~~~~~~~~~~~~~~~~


Found 3 errors.

Provide the exact sequence of commands / steps that you executed before running into the problem
The error is easily reconstructed with the following:

1. package.json:

{
	"name": "tfjs-ts-test",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"build": "tsc"
	},
	"author": "",
	"license": "ISC",
	"dependencies": {
		"@tensorflow/tfjs-backend-webgl": "^2.7.0",
		"@tensorflow/tfjs-core": "^2.7.0",
		"typescript": "^4.0.5"
	}
}

2. tsconfig.json:

{
	"compilerOptions": {
		"target": "ES2015"
	}
}

3. An empty index.ts
4. npm install
5. npm run build

Any other info / logs
This partially relates to #2007 but not the same issue

[tafsiri]

Does this happen with skipLibCheck: true in your tsconfig?

[google-ml-butler]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you.

[mceIdo]

Does this happen with skipLibCheck: true in your tsconfig?

No, and I get it that it's part of the official docs to place this flag in case of an error, but our case doesn't allow skipping lib checks

[tafsiri]

In that case you may need to wait until we upgrade the version of typescript we compile with. We are planning on doing that in the nearish future but I can't give you an ETA on that. I think this is caused by a clash between the now built in types for webgl and the @types/webgl2 package we currently use.

[tafsiri]

cc @mattsoulanille

[adriangodong]

Bumping this, there's a new version of @types/webgl2 that's supposed to fix the bug.
DefinitelyTyped/DefinitelyTyped#51717

Since tfjs-backend-webgl pinned the dependency to version 0.0.5, we can't upgrade @types/webgl2 without changing tfjs-backend-webgl.

[harisraharjo]

Any news on this?

[google-ml-butler]

Are you satisfied with the resolution of your issue?
Yes
No

[DBachiloVironit]

The errors still occur with the latest version of @tensorflow/tfjs-node and @tensorflow/tfjs-node-gpu.

1. package.json

{
    "name": "tensorflow-test",
    "version": "0.0.1",
    "private": true,
    "description": "",
    "scripts": {
        "build": "./node_modules/typescript/bin/tsc --project ./tsconfig.json",
        "start": "node src/index.js"
    },
    "dependencies": {
        "@tensorflow/tfjs-node": "^3.9.0",
        "long": "^4.0.0",
        "nsfwjs": "^2.4.1"
    },
    "devDependencies": {
        "@types/long": "^4.0.1",
        "@types/node": "^16.10.1",
        "@types/webgl2": "^0.0.6",
        "typescript": "^4.4.3"
    }
}

2. tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "types": [
            "node",
            "long"
        ]
    }
}

The errors are the same as in the first post.

About the `long` module

Note that I also added `long` module and types because otherwise I get these errors:

node_modules/@tensorflow/tfjs-core/dist/hash_util.d.ts:2:49 - error TS2304: Cannot find name 'Long'.

export declare function hexToLong(hex: string): Long;
                                                  ~~~~

node_modules/@tensorflow/tfjs-core/dist/hash_util.d.ts:3:69 - error TS2304: Cannot find name 'Long'.

export declare function fingerPrint64(s: Uint8Array, len?: number): Long;

[mattsoulanille]

I just ran into this bug. We've upgraded to TS 4.8.4, so I think we can remove @types/webgl2. I'm trying that now.

[google-ml-butler]

Are you satisfied with the resolution of your issue?
Yes
No