Cannot find name 'WebGL2RenderingContext'

Questions
, , ,
1

Hi everyone,

I have a project on Angular & Electron, and I’d like to integrate Three.js for a little bit of 3D image overlay.
I first updated my project to the latest Angular (8.2) then installed Three.js using npm install three.
The issue is that when calling import * as THREE from 'three'; in my code, and running ng serve or launching Electron, I get the following error message:

ERROR in ../node_modules/three/src/renderers/webgl/WebGLUtils.d.ts:3:43 - error TS2304: Cannot find name 'WebGL2RenderingContext'.

I tried installing @types/three and @types/webgl2, but none of them seem to solve the issue.
I also cloned this repo that shows an Angular project working with Three.js, I can run it perfectly fine, but I can’t see what the issue is on my project…

I know it’s probably a dumb solution that I didn’t think about (some declaration somewhere), but I can’t seem to find it…

Here is the link to my repo

To reproduce:

  • clone the repo,
  • go to CVERT-ng folder,
  • npm i,
  • npm i three
  • add import * as THREE from 'three'; in any .ts file (.service.ts or .component.ts),
  • serve or run electon: ng serve or npm run electron

Any help would be VERY much appreciated !..

Thank you very much in advance !!!

1 Like
2

Here is a solution that I found, after quite a lot of struggle…
I had, in my tsconfig.app.json, under the CompilerOptions tag

"types": [
    "node"
]

After Installing @types/webgl2, I did not add it to tsconfig.app.json, so Angular could not find the WebGL2RenderingContext declaration.
All I had to do is install @types/webgl2 with npm, and put the following in my tsconfig.app.json, onder the CompilerOptions tag:

"types": [
    "node",
    "webgl2"
]

Now it seem to work ok.

3 Likes