React-three-fiber: Uncaught TypeError: e.current.gl.render is not a function on change of route

[stephent]

Since updating RTF to 5.0.3 from 4.2.21, I see the following unhandled error when switching routes in my application:

Uncaught TypeError: e.current.gl.render is not a function
Mb @ /[...]/node_modules/react-three-fiber/web.js:157
THREE.Scene: .dispose() has been removed.

This only occurs on changing away from the page that includes RTF, and only if I make the change before my material textures have finished loading/rendering. I'm using useLoader with TextureLoader to load them, along with Suspense.

The issue is not seen with RTF 4.2.21, so this may be a new problem in 5.x.

[adamistheanswer]

I'm having the exact same error occur! However I'm not changing route, I have my r3f component sitting in a tabbed menu at the same route. When I first tab to my r3f component everything works as previously, I tab away from the component and it unmounts, this error is logged and then when I tab back my r3f component no longer loads.

I'm using the useTextureLoader hook from drei and I'm observing this bug regardless of wether I wait for my scenes textures to load fully before navigating away from my r3f component.

Again this issue is not present in 4.2.21 but is introduced when upgrading to 5.x

THREE.Scene.dispose() seems to have been removed in THREE version r120
https://github.com/mrdoob/three.js/pull/19972
https://github.com/mrdoob/three.js/releases/tag/r120

[anuragsr]

Facing the same issue, regardless of when the route change occurs

[pdenya]

I'm getting the dispose error but not the other one. As a temp fix to change the error to an info statement:

Object.assign( THREE.Scene.prototype, {
    dispose: function () {
        console.log( 'THREE.Scene: .dispose() has been removed.' );
    }
});

[stephent]

@pdenya I tried your workaround but the error still happened. Where should that code be placed?

Still seeing the underlying problem in 5.0.6.

[drcmda]

they "removed" scene.dispose, but left that message. it sucks, and forces us to make a distinction. normally r3f should not know what a scene is. if something has an "dispose" method it should call it on unmount.

someone made a pr for this and it should be in r3f already. but are you saying that you get an actual exception? can someone please make a real codesandbox?

[drcmda]

it should be fixed now. its a tricky issue. react changed the behaviour of useEffects cleanup which is now async. that meant that the renderloop kept rendering while the cleanup suddenly pulled the carpet away: the renderer instance was disposed of.

[stephent]

Thank you @drcmda - confirming this fixed it in my app.

[adamistheanswer]

Nice one @drcmda