Missing types for ImageEncodeOptions, OffscreenRenderingContextId, and OffscreenRenderingContext

Bugs
,
1

Hello! I am seeing an issue when trying to build a project that contains Babylon 6.3.0. Whenever I attempt to build my app, I get the following typescript errors:

../../node_modules/@babylonjs/core/Engines/engine.d.ts(1093,29): error TS2304: Cannot find name 'ImageEncodeOptions'.
../../node_modules/@babylonjs/core/Engines/engine.d.ts(1105,27): error TS2304: Cannot find name 'OffscreenRenderingContextId'.
../../node_modules/@babylonjs/core/Engines/engine.d.ts(1105,72): error TS2304: Cannot find name 'OffscreenRenderingContext'.

Is it possible that some types are missing in the latest releases? I see the same issue with ImageEncodeOptions even in 6.0.0.

2

This should be in your lib.dom.d.ts provided by typescript. So I guess you might use either a too recent or too old Typescript version. What version are you using ?

cc @RaananW

3

I am using typescript 4.7.3. I will try bumping to the latest version

4

Upgrading to typescript 5.0.4 fixed the issue! Thanks for the suggestion

5

there is always a bit of catching us when using the lib-dom declaration of your typescript file. VS Code is using one version, your project is using another version, adn babylon was transpiled using a different version.
TBH - apart from providing our own version of lib.dom, i don’t see a very good way to automatically solve this. There are ways, of course, but they require some steps on the user’s side. This is what I mean when I say it’s not automated.

6

I’m in the process of updating our Angular solution from version 14 to 15, and I thought I’d try the latest version 6 BabylonJS packages while I was at it. We’ve been on the final version 5 packages for a while now. I’m seeing the same issue with Typescript 4.9.5, which I believe is the highest version that is officially supported by Angular 15.2.x. Maybe it works unofficially, but I don’t think a higher version of Typescript is supported unless we go to Angular 16, which we aren’t planning on doing for a few months.

7

What version of babylon are you using? this should have been resolved in 6.2.0 (if I am not mistaken). Have you tried the latest babylon version?

8

I’m seeing the same issues. I uninstalled my old babylon (I think a 5.x) and installed the new one - which is 6.4.1 I think according to npm.

9

Updating to typescript 5.0.4 did not fix the problem. Assuming I did that right.

So right now typescript is showing 5.0.4 and babylon is showing 6.4.1

And these are my errors;

[ng]
[ng]
[ng] Error: node_modules/@babylonjs/core/Engines/engine.d.ts:1093:29 - error TS2304: Cannot find name ‘ImageEncodeOptions’.
[ng]
[ng] 1093 convertToBlob(options?: ImageEncodeOptions): Promise;
[ng] ~~~~~~~~~~~~~~~~~~
[ng]
[ng]
[ng] Error: node_modules/@babylonjs/core/Engines/engine.d.ts:1105:27 - error TS2552: Cannot find name ‘OffscreenRenderingContextId’. Did you mean ‘OffscreenCanvasRenderingContext2D’?
[ng]
[ng] 1105 getContext(contextId: OffscreenRenderingContextId, options?: any): OffscreenRenderingContext | null;
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng]
[ng] node_modules/@babylonjs/core/Engines/engine.d.ts:1147:5
[ng] 1147 var OffscreenCanvasRenderingContext2D: {
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] ‘OffscreenCanvasRenderingContext2D’ is declared here.
[ng]
[ng]
[ng] Error: node_modules/@babylonjs/core/Engines/engine.d.ts:1105:72 - error TS2552: Cannot find name ‘OffscreenRenderingContext’. Did you mean ‘OffscreenCanvasRenderingContext2D’?
[ng]
[ng] 1105 getContext(contextId: OffscreenRenderingContextId, options?: any): OffscreenRenderingContext | null;
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~
[ng]
[ng] node_modules/@babylonjs/core/Engines/engine.d.ts:1147:5
[ng] 1147 var OffscreenCanvasRenderingContext2D: {
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] ‘OffscreenCanvasRenderingContext2D’ is declared here.
[ng]
[ng]
[ng]
[ng] × Failed to compile.

10

Will you be able to share a reproduction? Are you including the dom lib in your tsconfig?

11

no idea if I am including the ‘dom lib in my tsconfig’ - I use ionic which (usually) handles all the build stuff for me.

This is kind of a massive project (and now the second time in a few months updating babylon has broken some built in types - last time you guys did an update which fixed it)

12

I mean I don’t have a simple reproduction.

13

Here is my tsconfig

{
“compileOnSave”: false,
“compilerOptions”: {
“baseUrl”: “./”,
“outDir”: “./dist/out-tsc”,
“forceConsistentCasingInFileNames”: true,
“strictPropertyInitialization”: false,
“strict”: true,
“noImplicitOverride”: true,
“noPropertyAccessFromIndexSignature”: true,
“noImplicitReturns”: true,
“noFallthroughCasesInSwitch”: true,
“sourceMap”: true,
“declaration”: false,
“downlevelIteration”: true,
“experimentalDecorators”: true,
“moduleResolution”: “node”,
“importHelpers”: true,
“target”: “es2015”,
“module”: “es2020”,
“lib”: [
“es2018”,
“DOM”
],
“useDefineForClassFields”: false
},
“angularCompilerOptions”: {
“enableI18nLegacyMessageIdFormat”: false,
“strictInjectionParameters”: true,
“strictInputAccessModifiers”: true,
“strictTemplates”: true
}
}

I see ‘DOM’ in there - if thats what you mean?

… time passes - tried to reply but forum stopped me. anyways;

Ok - to “fix” this I did something from the other time I got one of these errors on ‘DOMString’.

I created and included a ‘global.d.ts’ file in my src folder, and then put this in it;

type ImageEncodeOptions = any;
type OffscreenRenderingContextId = any;
type OffscreenRenderingContext = any;

Visual studio complained that this was already declared in lib.dom.d.ts - and red underlined it - but when I ran the project it all compiled and worked correctly.

No idea what this is all about, but at least I can still keep working now…

14

adding skipLibcheck: true to your compiler options in tsconfig should also solve this, but that’s not the bvest solution, of course.

I am unable to reproduce that, so if it is somehow possible to strip down the problecj and get a barebone package.json, tsconfig, and an index.ts that shows the issue I will be really grateful. And will also be able to understand the issue and (if it is on our end) fix it.

15

I gave this another try today, it still doesn’t work with the 6.5.0 packages and typescript 4.9.5. Until we upgrade to Angular 16 in a few months, this is the highest version of typescript we can use. We may have to stick with version 5.57.1 for now.

image
image1079×101 4.58 KB

Our application is massive, I don’t have a good way to give you a simple example you can use for debugging. The best I can do is share our package.json and the relevant settings in tsconfig.json:

We have included “dom” in our tsconfig.json file:

“lib”: [
“ES2020”,
“dom”,
“dom.iterable”
],

“dependencies”: {
“@angular/animations”: “^15.2.9”,
“@angular/cdk”: “^15.2.9”,
“@angular/common”: “^15.2.9”,
“@angular/compiler”: “^15.2.9”,
“@angular/core”: “^15.2.9”,
“@angular/flex-layout”: “^15.0.0-beta.42”,
“@angular/forms”: “^15.2.9”,
“@angular/material”: “^15.2.9”,
“@angular/platform-browser”: “^15.2.9”,
“@angular/platform-browser-dynamic”: “^15.2.9”,
“@angular/router”: “^15.2.9”,
“@babylonjs/core”: “^6.5.0”,
“@babylonjs/gui”: “^6.5.0”,
“@babylonjs/loaders”: “^6.5.0”,
“@babylonjs/materials”: “^6.5.0”,
“@brightlayer-ui/angular-themes”: “^9.0.0-alpha.5”,
“@ngx-translate/core”: “^14.0.0”,
“ag-grid-angular”: “^29.3.5”,
“ag-grid-community”: “^29.3.5”,
“deepmerge-ts”: “~4.3.0”,
“ngx-quill”: “20.0.1”,
“ngx-translate-multi-http-loader”: “~9.3.2”,
“quill”: “^1.3.7”,
“quill-image-compress”: “^1.2.30”,
“rxjs”: “^7.8.1”,
“typeface-open-sans”: “^1.1.13”,
“zone.js”: “^0.13.0”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “^15.2.8”,
“@angular/cli”: “^15.2.8”,
“@angular/compiler-cli”: “^15.2.9”,
“@angular/language-service”: “^15.2.9”,
“@types/jasmine”: “~4.3.0”,
“@types/jasminewd2”: “~2.0.10”,
“@types/node”: “^18.16.14”,
“@types/react”: “^18.2.7”,
“@types/react-dom”: “^18.2.4”,
“babylonjs-gltf2interface”: “^6.5.0”,
“codelyzer”: “^6.0.2”,
“jasmine-core”: “~4.5.0”,
“jasmine-spec-reporter”: “~7.0.0”,
“karma”: “~6.4.1”,
“karma-chrome-launcher”: “^3.2.0”,
“karma-coverage-istanbul-reporter”: “~3.0.3”,
“karma-jasmine”: “~5.1.0”,
“karma-jasmine-html-reporter”: “^2.0.0”,
“ng-packagr”: “~15.2.2”,
“protractor”: “~7.0.0”,
“ts-node”: “~10.9.1”,
“tslint”: “^6.1.3”,
“typescript”: “^4.9.5”
}

16

ImageEncodeOptions is actually a rather simple interface:

interface ImageEncodeOptions {
    quality?: number;
    type?: string;
}

You can add it yourself to a declaration file inside your build, if typescript doesn’t offer it.

However - typescript 3.7.2 already had it - https://unpkg.com/browse/typescript@3.7.2/lib/lib.dom.d.ts , so I have to admit I am very unsure why you would see this error.

If anyone can reproduce this, providing a simple project where it fails - I will be very happy to check that.

17

typescript 4.7.4 doesn’t have ImageEncodeOptions OffscreenRenderingContextId OffscreenRenderingContext
UNPKG - typescript

5.0.4 does