Next JS - Shader Error 1282 - VALIDATE_STATUS false

[Simoneth]

I tried replicating the Star Wars example from this CodeSandbox: link.
However, I'm encountering an SSR issue, as shown in my screenshot. Does anyone know how to fix this? Thanks in advance!

Here my package.json:

"@react-three/cannon": "^6.5.2",
"@react-three/drei": "^9.56.24",
"@react-three/fiber": "^8.11.1",
"@react-three/postprocessing": "^2.14.12",
"@types/three": "^0.170.0",
"leva": "^0.9.34",
"three": "^0.170.0",
"three-stdlib": "^2.23.12",
"react": "^18.3.1",
"next": "^15.0.3",

Here the error:

THREE.WebGLProgram: Shader Error 1282 - VALIDATE_STATUS false

Material Name: 
Material Type: ShaderMaterial

Program Info Log: Fragment shader is not compiled.
�

FRAGMENT

ERROR: 0:323: 'vViewPosition' : undeclared identifier
ERROR: 0:323: 'getTangentFrame' : no matching overloaded function found
ERROR: 0:323: '=' : dimension mismatch
ERROR: 0:323: '=' : cannot convert from 'const mediump float' to 'highp 3X3 matrix of float'
  318: #endif
  319: #if defined( USE_NORMALMAP_TANGENTSPACE ) || defined( USE_CLEARCOAT_NORMALMAP ) || defined( USE_ANISOTROPY )
  320: 	#ifdef USE_TANGENT
  321: 		mat3 tbn = mat3( normalize( vTangent ), normalize( vBitangent ), normal );
  322: 	#else
> 323: 		mat3 tbn = getTangentFrame( - vViewPosition, normal,
  324: 		#if defined( USE_NORMALMAP )
  325: 			vNormalMapUv
  326: 		#elif defined( USE_CLEARCOAT_NORMALMAP )
  327: 			vClearcoatNormalMapUv
  328: 		#else
  329: 			vUv

[CodyJasonBennett]

This is not an SSR error or anything inherent to R3F but three.js. Note that you will need to update libraries like Drei as you update three.js, as the latter is not backwards compatible and is API breaking every release. This was broken since r153 and fixed since Drei v9.84.2 pmndrs/drei#1628.

[Simoneth]

Thanks,
I tried to upgrade packages like this:

"@react-three/drei": "^9.99.0",
"@react-three/fiber": "^8.15.19",
"@react-three/postprocessing": "^2.19.1",
"three": "^0.162.0",

When I add SSR effect it gives me again the shader error:

Shader Error 0 - VALIDATE_STATUS false

Material Name: 
Material Type: MRTMaterial

Program Info Log: Fragment shader is not compiled.
�

FRAGMENT

ERROR: 0:310: 'vViewPosition' : undeclared identifier
ERROR: 0:310: 'getTangentFrame' : no matching overloaded function found
ERROR: 0:310: '=' : dimension mismatch
ERROR: 0:310: '=' : cannot convert from 'const mediump float' to 'highp 3X3 matrix of float'

This is my Effects implementation:

import { memo } from 'react'
import { EffectComposer, Bloom } from '@react-three/postprocessing'
import { useControls } from 'leva'
import dynamic from 'next/dynamic'
import { BlendFunction } from 'postprocessing'

// Dynamic imports for effects
const DynamicLUT = dynamic(() =>
    import('./LUTEffect').then((mod) => mod.LUTEffect),
    { ssr: false }
)

const DynamicSSR = dynamic(() =>
    import('@react-three/postprocessing').then((mod) => mod.SSR),
    { ssr: false }
)

export const Effects = memo(() => {
    const { enabled, intensity, threshold, smoothing } = useControls({
        enabled: true,
        intensity: { value: 2, min: 0, max: 5, step: 0.1 },
        threshold: { value: 0.2, min: 0, max: 1, step: 0.1 },
        smoothing: { value: 0.8, min: 0, max: 1, step: 0.1 }
    })

    if (!enabled) return null

    return (
        <EffectComposer>
            <DynamicSSR
                intensity={1}
                thickness={10}
                ior={1.45}
                maxRoughness={1}
                maxDepthDifference={10}
                blend={0.95}
                correction={1}
                roughnessFade={1}
                fade={0.5}
                temporalResolve
                temporalResolveMix={0.9}
                temporalResolveCorrectionMix={0.4}
            />
            <Bloom
                intensity={intensity}
                luminanceThreshold={threshold}
                luminanceSmoothing={smoothing}
                blendFunction={BlendFunction.ADD}
            />
            <DynamicLUT />
        </EffectComposer>
    )
})

Effects.displayName = 'Effects'

Is there a known combination of three, drei and @react-three/fiber good enough to work together in a Next JS app, allowing for the SSR effect to work correctly?

[Simoneth]

Is there a known combination of three, drei and @react-three/fiber good enough to work together in a Next JS app, allowing for the SSR effect to work correctly?

Or SSR is now deprecated and should I use SSREffect by realism-effects instead?

[CodyJasonBennett]

I missed that you're using SSR, but yes, it is deprecated since it functionally ejects from three's material system, which creates endless issues like this every month or when three makes a release. It will be removed in a future release:

https://github.com/pmndrs/react-postprocessing/releases/tag/v3.0.0-rc.0
<SSR /> has been removed as https://github.com/0beqz/screen-space-reflections is no longer maintained, and maintaining a modern G-buffer in three.js is not permittable without implementing a bespoke material system. We'll implement this upstream in pmndrs/postprocessing if nodes materials stabilize pmndrs/postprocessing#279 (comment), mrdoob/three.js#30185 (comment).