shaderMaterial with TypeScript + Next.js

[bonsng]

I'm struggling with using shaderMaterial. Typescript tells TS2339: Property pointShaderMaterial does not exist on type JSX.IntrinsicElements such warning. Here is my code

const PointShaderMaterial = shaderMaterial({ uSize: 2.0 }, vertex, fragment);
extend({ PointShaderMaterial });
...
<Points positions={points}>
      <pointShaderMaterial uSize={2.0} depthWrite={false} />
</Points>

[travisbreaks]

This is a type augmentation issue, not a runtime problem. extend() registers the material with R3F's reconciler at runtime, but TypeScript has no way to know about it.

Add a declaration file (e.g. shaders.d.ts) anywhere in your src/:

typescript
import { ShaderMaterial } from 'three'

declare global {
namespace JSX {
interface IntrinsicElements {
pointShaderMaterial: JSX.IntrinsicElements['meshStandardMaterial'] & {
uSize?: number
// add your other uniforms here
}
}
}
}


Make sure your tsconfig.json includes the file (if it's in src/ and you have "include": ["src"], it picks it up automatically).

The camelCase naming (pointShaderMaterial, not PointShaderMaterial) is intentional. R3F converts extended names to camelCase for JSX elements, following the Three.js convention where lowercase JSX tags = native three elements.

If you're using Next.js with the app router, you'll also need "use client" at the top of any component file that uses R3F, since none of this runs server-side.