TypeScript 5.0 errors

Hello, i just started a new project and wanted to use the latest TypeScript 5.0 version. Sadly it does not work with BabylonJS 5.53.0 because of errors like this:

node_modules/@babylonjs/core/Engines/engine.d.ts:3312:14 - error TS2717: Subsequent property declarations must have the same type.  Property 'FRAMEBUFFER_ATTACHMENT_TEXTURE_NUM_VIEWS_OVR' must be of type '38448', but here has type 'number'.

3312     readonly FRAMEBUFFER_ATTACHMENT_TEXTURE_NUM_VIEWS_OVR: number;
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:10509:14
    10509     readonly FRAMEBUFFER_ATTACHMENT_TEXTURE_NUM_VIEWS_OVR: 0x9630;
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    'FRAMEBUFFER_ATTACHMENT_TEXTURE_NUM_VIEWS_OVR' was also declared here.

I know that there are workarounds but it would be nice if it would work out of the box. Are there any plans to support TypeScript 5.0 directly?

Yes, it is planned, although it is not the current priority due to the launch of version 6.0, but it will probably come a little later.

Hi, I have the same error but with Typescript 4.9.5 and BabylonJS 6.0. I checked the installed packages.

BabylonJS 5.57.1 works fine for me, but as soon as I try 6.0.0 I get the same problem as @Kesshi .
Maybe it is also a question of tsconfig?

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

cc @RaananW

I can only assume you have the exact opposite error?

This was fixed for 6.0.0, as the newest lib.dom.d.ts has the definitions of those variables.
Can you share your project so I can find a solution that will work with all versions?

With Babylonjs 6.0.0 and Typescript 4.9.5 I’ve got the following errors:

 ERROR(TypeScript)  Subsequent property declarations must have the same type.  Property 'FRAMEBUFFER_ATTACHMENT_TEXTURE_NUM_VIEWS_OVR' must be of type 'number', but here has type '38448'.
 FILE  node_modules/@babylonjs/core/Engines/engine.d.ts:3371:14

    3369 | interface OVR_multiview2 {
    3370 |     framebufferTextureMultiviewOVR(target: GLenum, attachment: GLenum, texture: WebGLTexture | null, level: GLint, baseViewIndex: GLint, numViews: GLsizei): void;
  > 3371 |     readonly FRAMEBUFFER_ATTACHMENT_TEXTURE_NUM_VIEWS_OVR: 0x9630;
         |              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3372 |     readonly FRAMEBUFFER_ATTACHMENT_TEXTURE_BASE_VIEW_INDEX_OVR: 0x9632;
    3373 |     readonly MAX_VIEWS_OVR: 0x9631;
    3374 |     readonly FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR: 0x9633;

 ERROR(TypeScript)  Subsequent property declarations must have the same type.  Property 'FRAMEBUFFER_ATTACHMENT_TEXTURE_BASE_VIEW_INDEX_OVR' must be of type 'number', but here has type '38450'.
 FILE  node_modules/@babylonjs/core/Engines/engine.d.ts:3372:14

    3370 |     framebufferTextureMultiviewOVR(target: GLenum, attachment: GLenum, texture: WebGLTexture | null, level: GLint, baseViewIndex: GLint, numViews: GLsizei): void;
    3371 |     readonly FRAMEBUFFER_ATTACHMENT_TEXTURE_NUM_VIEWS_OVR: 0x9630;
  > 3372 |     readonly FRAMEBUFFER_ATTACHMENT_TEXTURE_BASE_VIEW_INDEX_OVR: 0x9632;
         |              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3373 |     readonly MAX_VIEWS_OVR: 0x9631;
    3374 |     readonly FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR: 0x9633;
    3375 | }

 ERROR(TypeScript)  Subsequent property declarations must have the same type.  Property 'MAX_VIEWS_OVR' must be of type 'number', but here has type '38449'.
 FILE  node_modules/@babylonjs/core/Engines/engine.d.ts:3373:14

    3371 |     readonly FRAMEBUFFER_ATTACHMENT_TEXTURE_NUM_VIEWS_OVR: 0x9630;
    3372 |     readonly FRAMEBUFFER_ATTACHMENT_TEXTURE_BASE_VIEW_INDEX_OVR: 0x9632;
  > 3373 |     readonly MAX_VIEWS_OVR: 0x9631;
         |              ^^^^^^^^^^^^^
    3374 |     readonly FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR: 0x9633;
    3375 | }
    3376 |

 ERROR(TypeScript)  Subsequent property declarations must have the same type.  Property 'FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR' must be of type 'number', but here has type '38451'.
 FILE  node_modules/@babylonjs/core/Engines/engine.d.ts:3374:14

    3372 |     readonly FRAMEBUFFER_ATTACHMENT_TEXTURE_BASE_VIEW_INDEX_OVR: 0x9632;
    3373 |     readonly MAX_VIEWS_OVR: 0x9631;
  > 3374 |     readonly FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR: 0x9633;
         |              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3375 | }
    3376 |
    3377 | abstract class OVR_multiview2 implements OVR_multiview2 {}

Yes, this is the other way from the typescript 5.0.0 error.
Breaking changes in TS 5’s lib.dom.d.ts cause this. i’ll run a few experiments and will find a solution. Thanks for reporting.

BTW - I can only assume that adsding skipLibCheck: true to your tsconfig will allow you to compile without an issue.

1 Like

Maybe not necessary anymore, but I created a basic project to reproduce the error: GitHub - MasonVX/babylonjs6WithTypescirpt4.

Yes, setting skipLibCheck to true removes the error.

1 Like

Typescript also supports to specify which version of the lib.dom should be used. See: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-5.html#supporting-lib-from-node_modules
In my case (TS 5.0 with BabylonJS 5.53.0) i added this line in the dependecies to solve the problem: "@typescript/lib-dom": "npm:@types/web@0.0.84":
Here is also an (outdated) list of versions: GitHub - microsoft/TypeScript-DOM-lib-generator: Tool for generating dom related TypeScript and JavaScript library files

So in your case this could work (without skipLibCheck: true): "@typescript/lib-dom": "npm:@types/web@0.0.99"

I just tried Version 6 with TS 5 but it still does not work. I get this error:

node_modules/typescript/lib/lib.dom.d.ts:14990:11 - error TS2430: Interface 'WebGL2RenderingContext' incorrectly extends interface 'WebGL2RenderingContextBase'.
  Types of property 'MIN' are incompatible.
    Type 'number' is not assignable to type '32775'.

14990 interface WebGL2RenderingContext extends WebGL2RenderingContextBase, WebGL2RenderingContextOverloads, WebGLRenderingContextBase {
                ~~~~~~~~~~~~~~~~~~~~~~

The problem is here i think: Babylon.js/webgl2.d.ts at master · BabylonJS/Babylon.js · GitHub
MIN is defined as number but in the lib-dom its defined as 0x8007.

1 Like

i’ll fix that asap.

Thanks

That’s right. But still - people are expecting that to work out of the box, and I can understand them.
To be honest, I think the best solution would be to remove those duplicated declaration, as typescript now supports them.

I will suggest a draft PR with a fix that will work for both typescript versions (hopefully :wink: ).

Thanks again for following up on this.

1 Like

Version 6.1.0 solves my issues. :smile:

2 Likes

The new version was pushed yesterday, with the PR fixing it merged. I am glad everything works as expected now. If anyone has any issue still, please let me know!

3 Likes