TypeScript errors with OffscreenCanvas and SharedArrayBuffer

[timanderson]

Note: I am quite new to TypeScript so may be missing something!

I am using TypeScript in a web application and importing modules from the SDK, having installed it via npm. The version is 2.24.0. I get four errors from the TypeScript compiler:

../node_modules/amazon-chime-sdk-js/build/videoframeprocessor/VideoFrameBuffer.d.ts:33:45 - error TS2304: Cannot find name 'OffscreenCanvas'.

33 asCanvasElement?(): HTMLCanvasElement | OffscreenCanvas | null;

../node_modules/amazon-chime-sdk-js/libs/voicefocus/types.d.ts:113:12 - error TS2583: Cannot find name 'SharedArrayBuffer'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2017' or later.

113 state: SharedArrayBuffer;

and two more similar regarding SharedArrayBuffer.

I can change the compiler option but don't want to do so for compatibility reasons, is this now the minimum supported target (I thought it was es2015).

OffscreenCanvas is part of an experimental API according to MDN.

Update: I did find an easy fix, by putting the following into index.d.ts:

type OffscreenCanvas = any; type SharedArrayBuffer = any;

[ltrung]

@timanderson This seems like a Typescript error. What is your TS version?

[timanderson]

tsc version 4.5.4

[ltrung]

@timanderson I think 4.5.4 contains some breaking changes. The current TS version in our dependency is 4.2.3.

[abbasdevelopers]

I am having the same issue. node_modules/amazon-chime-sdk-js/build/videoframeprocessor/VideoFrameBuffer.d.ts:33:45 - error TS2304: Cannot find name 'OffscreenCanvas'. I am using typescript version 4.5.2 and Angular 13.

[ltrung]

@abbasdevelopers Yes, the TS version has to be 4.2.3 :)

[mohamadkhalil88]

@ltrung so this library cannot work on Angular 13? because Angular 13 require TS version 4.4.2 or higher

[CharlieDigital]

@mohamadkhalil88 You can fix this problem by adding the @types/offscreencanvas package:

yarn add --dev @types/offscreencanvas

[mohamadkhalil88]

@CharlieDigital unfortunately this solution doesn't work. i installed @types/offscreencanvas and still same error: packaje.json: "@types/offscreencanvas": "^2019.6.4",

[abbasdevelopers]

@CharlieDigital I am facing the same issue even after installing @types/offscreencanvas.

[mohamadkhalil88]

i added offscreencanvas to types in tsconfig.json and it works:

"typeRoots": ["../node_modules/@types"],
"types": ["jasmine","offscreencanvas"],

Thanks @CharlieDigital

[saipratap99]

Adding jasmine and offscreencanvas types in tsconfig.app.json worked for me.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["jasmine", "offscreencanvas"]
  },
  "files": ["src/main.ts", "src/polyfills.ts"],
  "include": ["src/**/*.d.ts"]
}