WebGL errors in node with tensorflow, typescript and electron

Environment

OS: Arch Linux -> linux kernel version: 5.12.9
Node.js: 16.3.0
Typescript: 4.3.2
Babylonjs: 5.0.0-alpha.24
Electron: 13.1.0

What works

I can create the example scene from the playground and it works fine when only babylonjs is added to the dependencies (besides the electron and typescript stuff).

What does not work

As soon as i add anything from @tensorflow it can’t compile the stuff into javascript (tsc failes).
I don’t even need to include anything. The same code that just worked suddenly brakes after adding for example @tensorflow/tfjs-node.

Deleting the @tensorflow package(s) solves it all.

Background info

I’m not a js/ts dev at all (coming from c++/java) and i’m playing around with the concepts.
The little project i’m trying to start is an electron application which detects face landmarks and renders them (through babylonjs) with objects in 3d space. Nothing too complicated since the only thing i need to do is to glue together some libs/apis but that’s where i’m failing right now.

If you need any code, i’ll gladly share it through a github repo or smth. There’s nothing secret/personal about my project :stuck_out_tongue_winking_eye:

yarn run output

yarn run v1.22.10
$ tsc && electron-forge start
node_modules/babylonjs/babylon.module.d.ts:60535:9 - error TS2416: Property 'updateDynamicIndexBuffer' in type 'NullEngine' is not assignable to the same property in base type 'Engine'.
  Type '(indexBuffer: WebGLBuffer, indices: IndicesArray, offset?: number) => void' is not assignable to type '(indexBuffer: DataBuffer, indices: IndicesArray, offset?: number) => void'.
    Types of parameters 'indexBuffer' and 'indexBuffer' are incompatible.
      Property '__WebGLBuffer' is missing in type 'DataBuffer' but required in type 'WebGLBuffer'.

60535         updateDynamicIndexBuffer(indexBuffer: WebGLBuffer, indices: IndicesArray, offset?: number): void;
              ~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/@types/webgl-ext/index.d.ts:33:34
    33 interface WebGLBuffer { readonly __WebGLBuffer: void; }
                                        ~~~~~~~~~~~~~
    '__WebGLBuffer' is declared here.

node_modules/babylonjs/babylon.module.d.ts:60543:9 - error TS2416: Property 'updateDynamicVertexBuffer' in type 'NullEngine' is not assignable to the same property in base type 'Engine'.
  Type '(vertexBuffer: WebGLBuffer, vertices: FloatArray, byteOffset?: number, byteLength?: number) => void' is not assignable to type '(vertexBuffer: DataBuffer, data: DataArray, byteOffset?: number, byteLength?: number) => void'.
    Types of parameters 'vertexBuffer' and 'vertexBuffer' are incompatible.
      Type 'DataBuffer' is not assignable to type 'WebGLBuffer'.

60543         updateDynamicVertexBuffer(vertexBuffer: WebGLBuffer, vertices: FloatArray, byteOffset?: number, byteLength?: number): void;
              ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:60548:19 - error TS2416: Property '_deleteBuffer' in type 'NullEngine' is not assignable to the same property in base type 'Engine'.
  Type '(buffer: WebGLBuffer) => void' is not assignable to type '(buffer: DataBuffer) => void'.
    Types of parameters 'buffer' and 'buffer' are incompatible.
      Type 'DataBuffer' is not assignable to type 'WebGLBuffer'.

60548         protected _deleteBuffer(buffer: WebGLBuffer): void;
                        ~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:147104:9 - error TS2416: Property 'updateDynamicIndexBuffer' in type 'NullEngine' is not assignable to the same property in base type 'Engine'.
  Type '(indexBuffer: WebGLBuffer, indices: IndicesArray, offset?: number) => void' is not assignable to type '(indexBuffer: DataBuffer, indices: IndicesArray, offset?: number) => void'.
    Types of parameters 'indexBuffer' and 'indexBuffer' are incompatible.
      Property '__WebGLBuffer' is missing in type 'DataBuffer' but required in type 'WebGLBuffer'.

147104         updateDynamicIndexBuffer(indexBuffer: WebGLBuffer, indices: IndicesArray, offset?: number): void;
               ~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/@types/webgl-ext/index.d.ts:33:34
    33 interface WebGLBuffer { readonly __WebGLBuffer: void; }
                                        ~~~~~~~~~~~~~
    '__WebGLBuffer' is declared here.

node_modules/babylonjs/babylon.module.d.ts:147112:9 - error TS2416: Property 'updateDynamicVertexBuffer' in type 'NullEngine' is not assignable to the same property in base type 'Engine'.
  Type '(vertexBuffer: WebGLBuffer, vertices: FloatArray, byteOffset?: number, byteLength?: number) => void' is not assignable to type '(vertexBuffer: DataBuffer, data: DataArray, byteOffset?: number, byteLength?: number) => void'.
    Types of parameters 'vertexBuffer' and 'vertexBuffer' are incompatible.
      Type 'DataBuffer' is not assignable to type 'WebGLBuffer'.

147112         updateDynamicVertexBuffer(vertexBuffer: WebGLBuffer, vertices: FloatArray, byteOffset?: number, byteLength?: number): void;
               ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/babylonjs/babylon.module.d.ts:147117:19 - error TS2416: Property '_deleteBuffer' in type 'NullEngine' is not assignable to the same property in base type 'Engine'.
  Type '(buffer: WebGLBuffer) => void' is not assignable to type '(buffer: DataBuffer) => void'.
    Types of parameters 'buffer' and 'buffer' are incompatible.
      Type 'DataBuffer' is not assignable to type 'WebGLBuffer'.

147117         protected _deleteBuffer(buffer: WebGLBuffer): void;
                         ~~~~~~~~~~~~~

node_modules/typescript/lib/lib.dom.d.ts:16149:11 - error TS2430: Interface 'WebGL2RenderingContext' incorrectly extends interface 'WebGLRenderingContext'.
  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: ArrayBufferView, srcOffset: number) => void'.
      Types of parameters 'values' and 'values' are incompatible.
        Type 'ArrayBufferView' is not assignable to type 'ArrayLike<number> | Float32Array'.
          Type 'ArrayBufferView' is missing the following properties from type 'Float32Array': BYTES_PER_ELEMENT, copyWithin, every, fill, and 23 more.

16149 interface WebGL2RenderingContext extends WebGL2RenderingContextBase, WebGL2RenderingContextOverloads, WebGLRenderingContextBase {

Maybe @sebavan can help as I think he already worked with tensorflow.

Also, this issue may help: Compile error with TypeScript 3.6 · Issue #2007 · tensorflow/tfjs · GitHub

Yup I guess the trick from @Evgeni_Popov should do as it sounds related to webgl typings conflicting ?