twgl.js icon indicating copy to clipboard operation
twgl.js copied to clipboard

error TS2304: Cannot find name 'WebGL2RenderingContext'.

Open demskie opened this issue 5 years ago • 4 comments

typescript compiler is complaining about the below missing declarations:

node_modules/twgl.js/dist/4.x/twgl-full.d.ts:105:5 - error TS2304: Cannot find name 'WebGLTransformFeedback'.

node_modules/twgl.js/dist/4.x/twgl-full.d.ts:191:25 - error TS2304: Cannot find name 'WebGLVertexArrayObject'.

node_modules/twgl.js/dist/4.x/twgl-full.d.ts:201:44 - error TS2304: Cannot find name 'WebGL2RenderingContext'.

node_modules/twgl.js/dist/4.x/twgl-full.d.ts:202:38 - error TS2304: Cannot find name 'WebGL2RenderingContext'.

node_modules/twgl.js/dist/4.x/twgl-full.d.ts:203:37 - error TS2304: Cannot find name 'WebGL2RenderingContext'.

node_modules/twgl.js/dist/4.x/twgl-full.d.ts:254:55 - error TS2304: Cannot find name 'WebGL2RenderingContext'.

node_modules/twgl.js/dist/4.x/twgl-full.d.ts:255:55 - error TS2304: Cannot find name 'WebGL2RenderingContext'.

node_modules/twgl.js/dist/4.x/twgl-full.d.ts:256:44 - error TS2304: Cannot find name 'WebGL2RenderingContext'.

node_modules/twgl.js/dist/4.x/twgl-full.d.ts:257:38 - error TS2304: Cannot find name 'WebGL2RenderingContext'.

node_modules/twgl.js/dist/4.x/twgl-full.d.ts:258:37 - error TS2304: Cannot find name 'WebGL2RenderingContext'.

node_modules/twgl.js/dist/4.x/twgl-full.d.ts:293:74 - error TS2304: Cannot find name 'WebGLSampler'.

Note: SharedArrayBuffer is also missing when used in a node.js environment

To resolve them I had to create the following local definitions:

/// <reference lib="es2017.sharedmemory" />

// <reference lib="es2017.sharedmemory" resolves this declaration
// type SharedArrayBuffer = any;

declare global {
	// devDependency: "@types/webgl2" resolves the following declarations
	type WebGLTransformFeedback = any;
	type WebGLVertexArrayObject = any;
	type WebGL2RenderingContext = any;
	type WebGLSampler = any;
  }
  
  // If your module exports nothing you need this line
  export {};

demskie avatar Aug 11 '19 07:08 demskie

I still know almost nothing about typescript dev but this sounds like a typescript issue, not a twgl issue. You need to figure out how to include WebGL2 definitions in typescript

https://www.npmjs.com/package/@types/webgl2

i don't know if that means something needs to happen here. Maybe someone in this thread knows

https://github.com/greggman/twgl.js/issues/50

greggman avatar Aug 19 '19 16:08 greggman

It's a typescript nightmare.

By default a user's tsc (typescript compiler) will look at all dependencies and recursively check for unresolved definitions. To disable this behavior and ignore the warnings users have to set their --skipLibCheck flag.

In effect any unresolved dependencies in any typescript library causes (most) users to experience error output. tsc will still output the transpiled javascript. It just spews a bunch of red errors on screen while doing so.

For example, my tsconfig.json has the following lines:

"compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "lib": ["es2015", "dom"],
    "typeRoots": ["node_modules/@types"]
  }

When tsc comes across twgl and see's SharedArrayBuffer referenced it throws it's hands up because neither my code or your library have es2017.sharedmemory set as a dependency or reference library.

demskie avatar Aug 26 '19 02:08 demskie

So is there something I should add somewhere to make this work? A setting in package.json? A comment in twgl.d.ts? I seems like defining placeholder types is the wrong solution since if you're using WebGL2 you'd want them to be the real types.

@geon @pineapplemachine @colorpump ?

greggman avatar Sep 12 '19 09:09 greggman

@greggman As far as I know the best solution is to feature prominently in the readme that TypeScript users will need to add the aforementioned @types/webgl2 package to their dependencies (or usually just to devDependencies) for WebGL related libraries such as this one to work correctly.

The solution is absolutely for sure not maintaining a copy of @types/webgl2 in this package. You could add it to twgl's package dependencies, but that means it ends up in the dependencies of everybody's projects, though the majority of users will not need or want this package to be in their dependencies rather than their devDependencies. And that's if they're using TypeScript at all.

Unfortunately there's not currently any way that I can find to programmatically specify that a library's dependants that use TypeScript will need a certain @types package.

pineapplemachine avatar Sep 12 '19 09:09 pineapplemachine