Type error with ChromaticAberration

[Johnjackbogart]

Hi,

I have the below code:

import { useRef } from "react";
import * as THREE from "three";
import { useFrame } from "@react-three/fiber";
import {
  Bloom,
  EffectComposer,
  N8AO,
  TiltShift2,
  ChromaticAberration,
} from "@react-three/postprocessing";
import { ChromaticAberrationEffect, BlendFunction } from "postprocessing";
import { easing } from "maath";

export default function Effects() {
  const chromaRef = useRef<ChromaticAberrationEffect>(null);

  useFrame((state, delta) => {
    easing.damp3(
      state.camera.position,
      [
        Math.sin(-state.pointer.x) * 5,
        state.pointer.y * 2,
        0.5 + Math.cos(state.pointer.x) * 5,
      ],
      0.1,
      delta,
    );
    state.camera.lookAt(0, 0, 0);

    if (!chromaRef.current) return;
    const x = Math.sin(-state.pointer.x) / 100;
    const y = state.pointer.y / 100;
    const newOffset = new THREE.Vector2(x, y);
    chromaRef.current.offset = newOffset;
  });
  return (
    <EffectComposer enableNormalPass={true}>
      <ChromaticAberration
        ref={chromaRef}
        blendFunction={BlendFunction.NORMAL}
        offset={new THREE.Vector2(0.01, 0.01)}
        radialModulation={false}
        modulationOffset={1.0}
      />
      <Bloom mipmapBlur luminanceThreshold={0.8} intensity={2} levels={8} />
      <TiltShift2 blur={0.2} />
    </EffectComposer>
  );
}

I'm trying to animate the chromatic aberration offset.

However, I get the following error:

Type 'RefObject<ChromaticAberrationEffect>' is not assignable to type 'RefObject<typeof ChromaticAberrationEffect>'.
     Property 'prototype' is missing in type 'ChromaticAberrationEffect' but required in type 'typeof ChromaticAberrationEffect'.

I believe this is because the type is exported as typeof ChromaticAberrationEffect in react-three/postprocessing

instead of just ChromaticAberrationEffect

When I changed this in my node modules folder the issue is resolved

[Johnjackbogart]

I opened up a PR here:

#299

Not sure if this is the right way to do it tbh, curious if this solution makes sense.

To me, it doesn't make sense to export typeof ChromaticAberrationEffect, that just returns function

I'd expect you to want to export the full type, so this makes sense to me

[Johnjackbogart]

The PR doesn't work. My goal is basically to animate the offset of chromatic aberration based on mouse position. But with strict type checking enabled, I can't

[Johnjackbogart]

the solution I ended up going with was casting the type to unknown then to its expected type.

If I typed the ref I was using the same way <ChromaticAberrationEffect> expects then I can't access the offset in useFrame,

So it still seems like there is an issue here.

My PR doesn't build because of other TS issues, so working on that! Let me know if I'm on the right track, thanks!!

[CodyJasonBennett]

This will be fixed with React 19 or v3 of react-postprocessing. The types don't infer correctly with React 18 and forwardRef which is how this component is implemented.