pmndrs
NextJS v16.x componentCache fails to load threeJS scene.
NextJS v16.0 introduced their new caching layer called "componentCache" which essentially allows you to specify what components need caching vs not. Simply just enabling this feature causes any back and forward(browser) actions to fail. Its almost like the canvas is not being served in order? One dead giveaway is that if you use EffectComposer NextJS throws an error saying the "alpha" is null. Again this only happens when you navigate between routes. If I remove EffectComposer canvas simply does not load at all with no errors. So something is not initializing in time. I've tried wrapping in suspense at every level, adding a timer to see if it will load once the browser is way beyond ready. Nothing works.
Now Im not sure if this is a ThreeJS, Fibre, or NextJS issue. Fibre works perfectly fine if I disable this feature(but we really want to use it).
Stack:
| package | version |
|---|---|
| NextJS | v16.0.1 |
| Fibre | v9.4.0 |
| three | v0.180.0 |
| react | v19.2.0 |
| postprocessing | v3.0 |
Code sandbox with working example of the canvas crashing when using the browser back and forward buttons: https://codesandbox.io/p/live/fda157e6-0047-4385-a5cc-aecd32d347b0
