Three.js: Typescript first compile fails, "Cannot find name 'OffscreenCanvas'"

[Alexithemia]

ERROR in node_modules/three/src/renderers/WebGLRenderer.d.ts(34,31): error TS2304: Cannot find name 'OffscreenCanvas'.

Three version 0.109.0

Written in Typescript, module declared in typings.d.ts.

import * as THREE from 'three';

using MeshPhongMaterial, SphereGeometry, TorusGeometry, Geometry, and Mesh.

Fails first compile, recompiling still shows error but works as expected.

[Mugen87]

see #17571

@yiyix Any ideas about this issue?

[Mugen87]

Well, adding @types/offscreencanvas to the project seems to solve the issue.

see https://discourse.threejs.org/t/webglrenderer-d-ts-error-after-update-to-r109/10106

[yiyix]

Sorry about it. OffscreenCanvas is added to TypeScript last year. I am glad
the issue is solved now.

On Thu, Oct 10, 2019 at 10:55 AM Michael Herzog [e-mail]
wrote:

Well, adding @types/offscreencanvas
https://www.npmjs.com/package/@types/offscreencanvas to the project
seems to solve the issue.

see
https://discourse.threejs.org/t/webglrenderer-d-ts-error-after-update-to-r109/10106

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mrdoob/three.js/issues/17698?email_source=notifications&email_token=AIFKR726UHPVVPUWYFVNV2DQN33YBA5CNFSM4I67RN7KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEA3UFDI#issuecomment-540492429,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AIFKR7YZUEPEORB4XE7Z56DQN33YBANCNFSM4I67RN7A
.

[jnuricumbo]

I get the same error with r109, adding @types/offscreencanvas solve the issue, but now the question is, everyone using typescript should install that package only because of that type?

[Mugen87]

OffscreenCanvas is added to TypeScript last year. I am glad the issue is solved now.

Um, are you sure about that? It seems many devs having issues since OffscreenCanvas is used in WebGLRenderer.d.ts...

[NicolasRannou]

@Alexithemia which version of TS are you using?

[Mugen87]

It seems this problems occurs even with latest TS npm package 3.6.4.

https://discourse.threejs.org/t/webglrenderer-d-ts-error-after-update-to-r109/10106/6?u=mugen87

[Mugen87]

This issue is somewhat complicated since we can't make everyone happy. If we revert #17571, devs won't be able to pass OffscreenCanvas to WebGLRenderer anymore. However, it's then necessary to install @types/offscreencanvas or typescript@next until the actual TS package natively supports OffscreenCanvas. Not sure we want to force all TS users to do so.

Right now, I tend to revert the PR since more devs are complaining than benefiting from this change.

@mrdoob Are you okay with that?

[mrdoob]

I think it would be better to install @types/offscreencanvas.

[Mugen87]

Okay. After all it should be only a temporary issue. And applying the additional dependency is easy done. Closing for now.

[Xakaloz]

Hello,
Installing the @types/offscreencanvas package doesn't solve the error for me.
I am using Typescript 3.6.3 and Three 0.109.0.
Any solution without touching at the node packages files ?
Thank you.

Erratum: VSCode is using Typescript 3.6.3 BUT the typescript version in my package.json is 3.4.3.
It's a Ionic 4 project with Angular 8 and I cannot update typescript to 3.6.3...

[Xakaloz]

Fixed the issue upgrading Angular 8.1.2 to 8.2.11, supporting Typescript 3.5.3, and with the @types/offscreencanvas package installed.

[George35mk]

In my case, I am building a library that uses the Three.js and I get the same warning and I solved with these steps.

tsconfig.lib/json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "declaration": true,
    "inlineSources": true,
    "types": ["webgl2", "offscreencanvas"],  <--------- here
    "lib": [
      "dom",
      "es2018"
    ]
  },
  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableResourceInlining": true
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

The webgl2 inside the types solves this warning.

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

And the offscreencanvas inside the types solve this warning.

ERROR: node_modules/three/src/renderers/WebGLRenderer.d.ts(35,31): error TS2304: Cannot find name 'OffscreenCanvas'.