🐛 EffectComposer throws "Cannot read properties of undefined (reading 'length')" error

[Mojtaba-amirii]

Environment

• React version: 19.0.0
• Next version: 15.1.4
• three version: 0.172.0
• @react-three/fiber version: 9.0.0-rc.2
• @react-three/drei version: 9.120.6
• node version: v23.4.0
• npm version: 10.9.2

Problem description:

When using the EffectComposer component from drei, I'm encountering a "Cannot read properties of undefined (reading 'length')" error. This error occurs in the useLayoutEffect hook of the EffectComposer component. The current behavior is problematic because it prevents the EffectComposer from initializing properly and applying post-processing effects to the scene.

Actuall Behavior

The application throws the following error:

EffectComposer.tsx:141 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at EffectComposer.useLayoutEffect (EffectComposer.tsx:141:40)

Steps to Reproduce

1. Create a React Three Fiber scene
2. Add an EffectComposer component to the scene
3. Render the scene

Code Example

import React from 'react'
import { Canvas } from '@react-three/fiber'
import { EffectComposer } from '@react-three/postprocessing'

function Scene() {
  return (
    <Canvas>
      <mesh>
        <boxGeometry />
        <meshStandardMaterial />
      </mesh>
      <EffectComposer>
        {/* Your effects here */}
      </EffectComposer>
    </Canvas>
  )
}

[chrisweb]

@Mojtaba-amirii duplicate: #301