Property 'unrealBloomPass' does not exist on type 'JSX.IntrinsicElements'.

Hi guys,

I am very new at using three JS.
I am trying to create something cool with threeJS, react and typescript. According to my best friend google, unrealBloomPass is a component that can be used to create a cool bloomEffect.

problem is in the title, I get an error and it just doexn’t recognize the component (I think).

import { Canvas, extend } from "@react-three/fiber";
import { Suspense } from "react";
import { Points } from "./Points";
import { UnrealBloomPass, OutlinePass } from "three-stdlib";
import { Effects } from "@react-three/drei";
import React from "react";

export interface AnimationCanvasProps {
  [key: string]: string;
}

extend({ UnrealBloomPass, OutlinePass });

export const AnimationCanvas: React.FC<AnimationCanvasProps> = () => {
  return (
    <Canvas camera={{ position: [100, 10, 0], fov: 75 }}>
      <Suspense fallback={null}>
        <Effects disableGamma>
          <unrealBloomPass threshold={1} strength={1.0} radius={0.5} />
        </Effects>
        <Points />
      </Suspense>
    </Canvas>
  );
};

try an uppercase,
UnrealBloomPass

im guessing your issue is typescript. you need to teach typescript that a new intrinsic element was added, but i don’t know typescript, i assume that if you use it you know …

something like

declare global {
  namespace JSX {
    interface IntrinsicElements {
      unrealBloomPass: any // ???
    }
  }
}