Route changes cause app to crash until page is refreshed

[snsie]

Description of the bug

Route changes (e.g. when using react-router or wouter) frequently result in pages becoming unresponsive. However, the pages load successfully once refreshing the page. When this occurs, the following error is logged in the console:

Uncaught TypeError: renderer.getClearAlpha is not a function
at ClearPass.render (postprocessing.esm.js:3225)
at RenderPass.render (postprocessing.esm.js:3660)
at EffectComposer.render (postprocessing.esm.js:6271)
at Object.current (index.js:1)
at Mb (web.js:157)
at web.js:158
at Map.forEach ()
at Ec (web.js:158)

I think this issue is related to the order of events when creating a canvas. Pages will load successfully after removing EffectComposer (imported via @react-three/postprocessing) from each scene. I posted the issue here because the error log points to this library, but I'm not certain if the root cause of the issue actually exists within this library, react-three-fiber or @react-three/postprocessing.

Library versions used

"react": "^17.0.0"
"three": "^0.121.1"
"react-three-fiber": "^5.1.3"
"@react-three/postprocessing": "^1.4.1"

[vanruesc]

Hi,

it looks like the renderer that was passed into the EffectComposer is not actually an instance of WebGLRenderer. This problem seems more closely related to @react-three/postprocessing and the bug is probably somewhere in your setup code.

[snsie]

Hello,

Thank you for your fast response!

I created a demo sandbox to illustrate the issue: demo
The @react-three/postprocessing library isn't used in the demo, but the same issue remains. The app initially loads successfully, but when I select the Spheres link, the route change triggers the same error. The code in the Effects.js file was taken from this example. If the issue is due to my setup code, any feedback would be much appreciated.

Thanks again for your help.

[vanruesc]

The @react-three/postprocessing library isn't used in the demo

In that case it's related to react-three-fiber which I'm not familiar with. The demo sometimes prints the following error for me when I click on the spheres link:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
ResizeContainer@https://vh4x3.csb.app/node_modules/react-three-fiber/web.js:1080:64
Canvas@https://vh4x3.csb.app/node_modules/react-three-fiber/web.js:1109:30
SpherePage 
    in ResizeContainer (created by Canvas)
    in Canvas (at SpherePage.js:37)
    in SpherePage (at App.js:15) vendors~app~embed~sandbox-startup.10f5f18b4.chunk.js:1:557
    e https://codesandbox.io/static/js/vendors~app~embed~sandbox-startup.10f5f18b4.chunk.js:1
    e https://codesandbox.io/static/js/sandbox.2c18cd6ad.js:1
    e https://codesandbox.io/static/js/sandbox.2c18cd6ad.js:1
    r https://codesandbox.io/static/js/vendors~react-devtools-backend.e370640ee.chunk.js:1
    React 5
    callback https://vh4x3.csb.app/node_modules/react-use-measure/dist/web.js:48
    later https://vh4x3.csb.app/node_modules/debounce/index.js:27

[vanruesc]

Closing this since there is no clear indication of a bug in postprocessing.

If you wish to keep this issue open as a potential bug in postprocessing, please provide a minimal reproduction of the issue without any other frameworks.