Try to use WebGPU and got this error "gl.xr.addEventListener is not a function". How to fix that?

[UuPhan]

I use this #1717 (comment) as reference but seem it's not working. I don't know if r3f or three causing that error.

import WebGPU from "three/examples/jsm/capabilities/WebGPU.js";
import WebGPURenderer from "three/examples/jsm/renderers/webgpu/WebGPURenderer.js";
import { Canvas } from "@react-three/fiber";

export default function EWebGPU() {
  return (
    <Canvas
      gl={(canvas) => new WebGPURenderer({ canvas })}
      frameloop="never"
      onCreated={async (state) => {
        await state.gl.init();
        state.set({ frameloop: "always" });
      }}
    ></Canvas>
  );
}

gl.xr.addEventListener is not a function
TypeError: gl.xr.addEventListener is not a function
    at Object.connect (http://localhost:3000/static/js/bundle.js:18609:19)
    at Object.configure (http://localhost:3000/static/js/bundle.js:18620:23)
    at http://localhost:3000/static/js/bundle.js:19113:20
    at commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:57392:30)
    at commitLayoutEffectOnFiber (http://localhost:3000/static/js/bundle.js:57492:21)
    at commitLayoutMountEffects_complete (http://localhost:3000/static/js/bundle.js:58691:13)
    at commitLayoutEffects_begin (http://localhost:3000/static/js/bundle.js:58680:11)
    at commitLayoutEffects (http://localhost:3000/static/js/bundle.js:58626:7)
    at commitRootImpl (http://localhost:3000/static/js/bundle.js:60536:9)
    at commitRoot (http://localhost:3000/static/js/bundle.js:60416:9)

I'm using:
three 0.154.0
react-three-fiber 8.13.5

[jesseburke]

I was having the same error, and fixed it by removing the gl function-prop and wrapping my scene in the WebGPU component defined here https://codesandbox.io/p/sandbox/r3f-webgpu-8b6ly5?file=%2Fsrc%2FWebGPU.tsx%3A1%2C1-67%2C1 . I haven't figured out why the original way didn't work

[UuPhan]

Yes, your solution is get rid error of gl.xr.addEventListener is not a function. But I feel like it's not proper ways to fix it. I just tested and disappointed that throw NodeMaterial not supported, while native ThreeJS is loading model with no problem. https://threejs.org/examples/webgpu_loader_gltf.html

[jesseburke]

No it's not the proper way, but at least it's running atm.

[couch4]

any update on this? does it work in a previous build?

[Cerberus]

This already has been fixed. (as I tried THREE around v.159)
And for the previous versions, you can use a workaround like this..

<Canvas
			gl={(canvas) => {
				const r = new WebGPURenderer({
					canvas,
				})
				r.xr = {
					addEventListener: () => {},
					removeEventListener: () => {},
				}
				return r
			}}
/>