Error TS2420: Class 'XRWebGLLayer' incorrectly implements interface 'XRLayer'

I’m trying to update TS from 4.3.5 to 4.8.4 in this repo, which uses babylon: model-viewer/packages/render-fidelity-tools at master · google/model-viewer · GitHub

I’m getting a bunch of errors along the lines of:
@google/model-viewer-render-fidelity-tools: node_modules/@babylonjs/core/Engines/engine.d.ts(2421,7): error TS2420: Class ‘XRWebGLLayer’ incorrectly implements interface ‘XRLayer’.

@google/model-viewer-render-fidelity-tools: Property ‘prototype’ is missing in type ‘XRWebGLLayer’ but required in type ‘EventTarget’.

@google/model-viewer-render-fidelity-tools: node_modules/@babylonjs/core/XR/native/nativeXRRenderTarget.d.ts(13,14): error TS2416: Property ‘layer’ in type ‘NativeXRLayerWrapper’ is not assignable to the same property in base type ‘WebXRLayerWrapper’.

@google/model-viewer-render-fidelity-tools: Type ‘XRWebGLLayer’ is not assignable to type ‘XRLayer’.

I also tried updating babylon from 5.0 to 5.27, but the errors remain. Is babylon incompatible with the latest TS (at least with strict checks enabled)?

I usually follow package.json - not sure what official word is:

This is probably a discrepancy between the WebXR typing we and they are using. I’ll check the WebXR declaration later today.
Those types are not coming from TS, so it’s not the version of the package. My assumption is that the use is because they are using the @types/webxr, and we use our own custom declaration

[XR] update the webxr typings to match current state by RaananW · Pull Request #13104 · BabylonJS/Babylon.js (github.com)

Thanks for the quick response! I tried TS v4.6.2, but same problem. v4.3.5 does work, so I’d guess there are just more strict checks that have been added? Does “they” indicate me in this context? I don’t have @types/webxr in this build and I’m not using babylon for anything WebXR related, hence why this feels like more of a core incompatibility. Is there some set of TS checks that need to be disabled to build babylon?

you can see the tsconfig we are using while developing and while building:

Babylon.js/tsconfig.build.json at master · BabylonJS/Babylon.js (github.com)

Oh, and you have not included the types, but other packages might have. check if it is in your node_modules as a dependency

I am getting the exact same error when using babylon-versions 5.20 - 5.24. Did you find the solution? I tried downgrading babylons and ts to different version but I am unable to go down to TS 4.3 as another dep (angular) requires at least 4.6.2.

When I try to update to the most recent version of babylon, this particular error disappears for me but others appear. This might be related, maybe both have a common reason.


2684     eyetrackingstart: XREyeTrackingEvent;
                           ~~~~~~~~~~~~~~~~~~


Error: node_modules/@babylonjs/core/Engines/engine.d.ts:2685:21 - error TS2304: Cannot find name 'XREyeTrackingEvent'.

2685     eyetrackingend: XREyeTrackingEvent;
                         ~~~~~~~~~~~~~~~~~~


Error: node_modules/@babylonjs/core/Engines/engine.d.ts:2840:5 - error TS2300: Duplicate identifier 'createAnchor'.

2840     createAnchor?: (pose: XRRigidTransform, space: XRSpace) => Promise<XRAnchor> | undefined;
         ~~~~~~~~~~~~


Error: node_modules/@babylonjs/core/Engines/engine.d.ts:2980:11 - error TS2320: Interface 'XRHand' cannot simultaneously extend types 'Map<any, any>' and 'Map<number, XRJointSpace>'.
  Named property '[Symbol.iterator]' of types 'Map<any, any>' and 'Map<number, XRJointSpace>' are not identical.

2980 interface XRHand extends Map<number, XRJointSpace> {

I verified that @types/webxr is not in my node_modules. However, I did find a solution in your tsconfig: "skipLibCheck": true

3 Likes

Not fixed yet in v5.28.0 ?

“skipLibCheck”: true is not a normal way to handle it,right ?

the typing is already there, so there shouldn’t be any conflict with any other typings loaded. I’ll check that later this week, but until then skipLibCheck can be used to ignore the issue, yes.

1 Like

This PR will fix this:

2 Likes