circular structure to JSON --> starting at object with constructor

[Saar1985]

I have version 3.0.4 , after adding Lens flare have this error on every page resize
Uncaught TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property 'children' -> object with constructor 'Array'
| index 0 -> object with constructor 'Object'
--- property 'parent' closes the circle
at JSON.stringify ()
at util.tsx:38:7
at react-stack-bottom-frame (react-reconciler.development.js:14492:20)
at renderWithHooks (react-reconciler.development.js:3914:22)

My Effects.jsx code

// Effects.jsx
import React, { useMemo } from 'react';
import { EffectComposer, Bloom, LensFlare } from '@react-three/postprocessing';
import { useTexture } from "@react-three/drei";
import { Color } from 'three';

export function Effects() {
const lensDirtTexture = useTexture('/lensDirtTexture.png');

// use simple, serializable props instead of complex Three.js classes directly
const lensFlareProps = useMemo(() => ({
    enabled: true,
    opacity: 1.0,
    position: { x: -25, y: 6, z: -60 },
    glareSize: 0.35,
    starPoints: 6,
    animated: true,
    followMouse: false,
    anamorphic: false,
    colorGain: new Color('#38160b'), // Hex string converted safely here
    flareSpeed: 0.4,
    flareShape: 0.1,
    flareSize: 0.005,
    secondaryGhosts: true,
    ghostScale: 0.1,
    aditionalStreaks: true,
    starBurst: true,
    haloScale: 0.5,
    lensDirtTexture: lensDirtTexture
}), [lensDirtTexture]);

return (
    <EffectComposer>
        <Bloom
            luminanceThreshold={0.5}
            mipmapBlur
            luminanceSmoothing={0.2}
            intensity={0.2}
        />
        <LensFlare {...lensFlareProps} />
    </EffectComposer>
);

}

[jakubfiala]

@Saar1985 having the same issue, and I'm pretty sure it's because of this line here:

https://github.com/pmndrs/react-postprocessing/blob/master/src/util.tsx#L34

I guess as a quick way to check if the values of any prop have changed, they're using the JSON-stringified props as a dependency for useMemo. It doesn't seem to have anything to do with the actual functionality of the effect. Sadly in this case the props also contain a ref, which has a circular structure (I guess because it's a JSX element).

I tried copying the whole LensFlare.tsx and using my modified version of wrapEffect, where I specifically removed ref from the props being JSON-ified, and this got rid of the error.

However, the effect itself seems to break everything else in my scene, my lighting & environment map is completely gone.

[MaximeHeckel]

@jakubfiala confirming it's indeed wrapEffect

My workaround so far is to use the one recommended in the docs and it seems to do the work for me albeit not being as robust in some very specific case (e.g. passing properties directly as props of the effect, I'll need to look into improving that) and lacks things like blending or opacity. It's really just to get going

export const MyCustomEffect = forwardRef(({ param }, ref) => {
  const effect = useMemo(() => new MyCustomEffectImpl(param), [param])
  return <primitive ref={ref} object={effect} dispose={null} />
})

or for React 19

export const MyCustomEffect = ({ ref, param = {} }) => {
  const effect = useMemo(() => new MyCustomEffectImpl(param), [param]);
  return <primitive ref={ref} object={effect} dispose={null} />;
};

cc @krispya what I mentioned to you the other day something I'd be down to look into with you

Unfortunately this breaks quite a few other effects in the package e.g. ChromaticAberration.

For that I'd suggest, in the meantime, importing them from postprocessing instead and using the wrapEffect function suggested in the docs