BREAKING CHANGE: React 19 support (#2318)

BREAKING CHANGE: React 19 support

.codesandbox/ci.json

@@ -1,5 +1,5 @@
 {
   "sandboxes": ["4nc1u", "bfplr", "1wh6f"],
   "packages": ["dist"],
-  "node": "18"
+  "node": "20"
 }

.storybook/Setup.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Vector3 } from 'three'
-import { Canvas, Props as CanvasProps } from '@react-three/fiber'
+import { Canvas, CanvasProps } from '@react-three/fiber'
 
 import { OrbitControls } from '../src'
 
@@ -25,8 +25,8 @@ export const Setup = ({
     {children}
     {lights && (
       <>
-        <ambientLight intensity={0.8} />
-        <pointLight intensity={1} position={[0, 6, 0]} />
+        <ambientLight intensity={0.8 * Math.PI} />
+        <pointLight intensity={1 * Math.PI} position={[0, 6, 0]} decay={0} />
       </>
     )}
     {controls && <OrbitControls makeDefault />}

.storybook/stories/AccumulativeShadows.stories.tsx

@@ -1,7 +1,7 @@
 import * as THREE from 'three'
 import * as React from 'react'
 import { ComponentProps } from 'react'
-import { FlakesTexture } from 'three/examples/jsm/textures/FlakesTexture'
+import { FlakesTexture } from 'three-stdlib'
 import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
@@ -48,7 +48,7 @@ function Suzi(props: ComponentProps<'group'>) {
     material.color.set('orange')
     material.roughness = 0
     material.normalMap = new THREE.CanvasTexture(
-      new FlakesTexture(),
+      new FlakesTexture() as HTMLCanvasElement,
       THREE.UVMapping,
       THREE.RepeatWrapping,
       THREE.RepeatWrapping

.storybook/stories/Adaptive.stories.tsx

@@ -60,7 +60,7 @@ function AdaptiveScene(props: ComponentProps<typeof AdaptiveDpr>) {
         <Archer />
       </Suspense>
       <directionalLight
-        intensity={0.2}
+        intensity={0.2 * Math.PI}
         position={[10, 10, 5]}
         shadow-mapSize-width={64}
         shadow-mapSize-height={64}

.storybook/stories/ArcballControls.stories.tsx

@@ -47,7 +47,7 @@ const CustomCamera = ({ ...props }: ComponentProps<typeof ArcballControls>) => {
    * we will render our scene in a render target and use it as a map.
    */
   const fbo = useFBO(400, 400)
-  const virtualCamera = useRef<OrthographicCamera | PerspectiveCameraType>()
+  const virtualCamera = useRef<PerspectiveCameraType>(null!)
   const [virtualScene] = useState(() => new Scene())
 
   useFrame(({ gl }) => {

.storybook/stories/BBAnchor.stories.tsx

@@ -30,7 +30,7 @@ function BBAnchorScene({
   drawBoundingBox: boolean
   children?: React.ReactNode
 }) {
-  const ref = React.useRef(null)
+  const ref = React.useRef<THREE.Mesh<THREE.IcosahedronGeometry>>(null!)
 
   useHelper(drawBoundingBox && ref, BoxHelper, 'cyan')
 

.storybook/stories/Bvh.stories.tsx

@@ -23,7 +23,7 @@ export default {
 type Story = StoryObj<typeof Bvh>
 
 function TorusBVH({ z = 0, ...props }: { z: number } & React.ComponentProps<typeof Bvh>) {
-  const mesh = React.useRef<React.ElementRef<typeof TorusKnot>>(null!)
+  const mesh = React.useRef<React.ComponentRef<typeof TorusKnot>>(null!)
 
   useHelper(mesh, MeshBVHHelper)
 
@@ -122,7 +122,7 @@ const DebugRayCast = ({ grp }) => {
 }
 
 function Scene(props: React.ComponentProps<typeof Bvh>) {
-  const grp = React.useRef<React.ElementRef<'group'>>(null)
+  const grp = React.useRef<React.ComponentRef<'group'>>(null)
 
   const { raycaster } = useThree()
   raycaster.firstHitOnly = true

.storybook/stories/CameraControls.stories.tsx

@@ -1,6 +1,6 @@
 import { createPortal, useFrame } from '@react-three/fiber'
 import React, { ComponentProps, useRef, useState } from 'react'
-import { Scene } from 'three'
+import * as THREE from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
@@ -47,9 +47,9 @@ const CameraControlsScene2 = (props: ComponentProps<typeof CameraControls>) => {
    * we will render our scene in a render target and use it as a map.
    */
   const fbo = useFBO(400, 400)
-  const virtualCamera = useRef<CameraControls['camera']>()
-  const [virtualScene] = useState(() => new Scene())
-  const cameraControlRef = useRef<CameraControls>(null)
+  const virtualCamera = useRef<THREE.PerspectiveCamera>(null!)
+  const [virtualScene] = useState(() => new THREE.Scene())
+  const cameraControlRef = useRef<CameraControls>(null!)
 
   useFrame(({ gl }) => {
     if (virtualCamera.current) {

.storybook/stories/CubeCamera.stories.tsx

@@ -22,18 +22,16 @@ export default {
 
 type Story = StoryObj<typeof CubeCamera>
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      axisHelper: object
-    }
+declare module '@react-three/fiber' {
+  interface ThreeElements {
+    axisHelper: object
   }
 }
 
 function Sphere({ offset = 0, ...props }: ComponentProps<typeof CubeCamera> & { offset?: number }) {
-  const ref = React.useRef<React.ElementRef<'mesh'>>(null)
+  const ref = React.useRef<THREE.Mesh>(null!)
   useFrame(({ clock }) => {
-    ref.current!.position.y = Math.sin(offset + clock.elapsedTime) * 5
+    ref.current.position.y = Math.sin(offset + clock.elapsedTime) * 5
   })
 
   return (

.storybook/stories/CurveModifier.stories.tsx

@@ -9,15 +9,13 @@ import { CurveModifier, CurveModifierRef } from '../../src'
 
 extend({ StdText: TextGeometry })
 
-type TextGeometryImpl = JSX.IntrinsicElements['extrudeGeometry'] & {
+type TextGeometryImpl = ThreeElements['extrudeGeometry'] & {
   args: [string, TextGeometryParameters]
 }
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      stdText: TextGeometryImpl
-    }
+declare module '@react-three/fiber' {
+  interface ThreeElements {
+    stdText: TextGeometryImpl
   }
 }
 

.storybook/stories/Extrude.stories.tsx

@@ -22,7 +22,7 @@ export default {
 type Story = StoryObj<typeof Extrude>
 
 function ExtrudeScene(props: React.ComponentProps<typeof Extrude>) {
-  const ref = useTurntable<React.ElementRef<typeof Extrude>>()
+  const ref = useTurntable<React.ComponentRef<typeof Extrude>>()
 
   return (
     <>

.storybook/stories/FaceControls.stories.tsx

@@ -7,7 +7,7 @@ import * as easing from 'maath/easing'
 import { Setup } from '../Setup'
 
 import { FaceLandmarker, FaceControls, Box, WebcamVideoTexture } from '../../src'
-import { ComponentProps, ElementRef, useRef, useState } from 'react'
+import { ComponentProps, ComponentRef, useRef, useState } from 'react'
 import { FaceLandmarkerResult } from '@mediapipe/tasks-vision'
 import { useFrame, useThree } from '@react-three/fiber'
 
@@ -55,8 +55,8 @@ export const FaceControlsSt = {
 //
 
 function FaceControlsScene2(props: ComponentProps<typeof FaceControls>) {
-  const faceLandmarkerRef = useRef<ElementRef<typeof FaceLandmarker>>(null)
-  const videoTextureRef = useRef<ElementRef<typeof WebcamVideoTexture>>(null)
+  const faceLandmarkerRef = useRef<ComponentRef<typeof FaceLandmarker>>(null)
+  const videoTextureRef = useRef<ComponentRef<typeof WebcamVideoTexture>>(null)
 
   const [faceLandmarkerResult, setFaceLandmarkerResult] = useState<FaceLandmarkerResult>()
 
@@ -99,7 +99,7 @@ export const FaceControlsSt2 = {
 //
 
 function FaceControlsScene3(props: ComponentProps<typeof FaceControls>) {
-  const faceControlsRef = useRef<ElementRef<typeof FaceControls>>(null)
+  const faceControlsRef = useRef<ComponentRef<typeof FaceControls>>(null)
 
   const camera = useThree((state) => state.camera)
   const [current] = useState(() => new THREE.Object3D())

.storybook/stories/Fbo.stories.tsx

@@ -22,7 +22,7 @@ export default {
 type Story = StoryObj<typeof Fbo>
 
 function SpinningThing() {
-  const mesh = React.useRef<React.ElementRef<typeof TorusKnot>>(null!)
+  const mesh = React.useRef<React.ComponentRef<typeof TorusKnot>>(null!)
 
   useFrame(() => {
     mesh.current.rotation.x = mesh.current.rotation.y = mesh.current.rotation.z += 0.01
@@ -40,7 +40,7 @@ function FboScene(props: React.ComponentProps<typeof Fbo>) {
 }
 
 function TargetWrapper({ target }: { target: THREE.WebGLRenderTarget }) {
-  const cam = React.useRef<React.ElementRef<typeof PerspectiveCamera>>(null!)
+  const cam = React.useRef<React.ComponentRef<typeof PerspectiveCamera>>(null!)
 
   const scene = React.useMemo(() => {
     const scene = new THREE.Scene()

.storybook/stories/HTML.stories.tsx

@@ -31,7 +31,7 @@ function HTMLScene({
   color?: React.ComponentProps<'meshBasicMaterial'>['color']
   children?: React.ReactNode
 } & HtmlProps) {
-  const ref = useTurntable<React.ElementRef<'group'>>()
+  const ref = useTurntable<React.ComponentRef<'group'>>()
 
   return (
     <group ref={ref}>
@@ -123,8 +123,8 @@ function HTMLOrthographicScene(props: HtmlProps) {
           <Html {...props}>Orthographic</Html>
         }
       </Icosahedron>
-      <ambientLight intensity={0.8} />
-      <pointLight intensity={1} position={[0, 6, 0]} />
+      <ambientLight intensity={0.8 * Math.PI} />
+      <pointLight intensity={1 * Math.PI} position={[0, 6, 0]} decay={0} />
     </>
   )
 }
@@ -164,8 +164,8 @@ export const HTMLCalculatePositionSt = {
 //
 
 function HTMLOccluderScene(props: HtmlProps) {
-  const turntableRef = useTurntable<React.ElementRef<'group'>>()
-  const occluderRef = React.useRef<React.ElementRef<typeof Icosahedron>>(null)
+  const turntableRef = useTurntable<React.ComponentRef<'group'>>()
+  const occluderRef = React.useRef<React.ComponentRef<typeof Icosahedron>>(null)
 
   return (
     <>
@@ -195,8 +195,8 @@ function HTMLOccluderScene(props: HtmlProps) {
           </Html>
         </Icosahedron>
       </group>
-      <ambientLight intensity={0.8} />
-      <pointLight intensity={1} position={[0, 6, 0]} />
+      <ambientLight intensity={0.8 * Math.PI} />
+      <pointLight intensity={1 * Math.PI} position={[0, 6, 0]} decay={0} />
     </>
   )
 }

.storybook/stories/Lathe.stories.tsx

@@ -22,7 +22,7 @@ export default {
 type Story = StoryObj<typeof Lathe>
 
 function LatheScene(props: React.ComponentProps<typeof Lathe>) {
-  const ref = useTurntable<React.ElementRef<typeof Lathe>>()
+  const ref = useTurntable<React.ComponentRef<typeof Lathe>>()
 
   return (
     <Lathe ref={ref} {...props}>

.storybook/stories/MarchingCubes.stories.tsx

@@ -35,8 +35,8 @@ function MarchingCubesScene({
   planeY?: boolean
   planeZ?: boolean
 } & React.ComponentProps<typeof MarchingCubes>) {
-  const cubeRefOne = React.useRef<React.ElementRef<typeof MarchingCube>>(null)
-  const cubeRefTwo = React.useRef<React.ElementRef<typeof MarchingCube>>(null)
+  const cubeRefOne = React.useRef<React.ComponentRef<typeof MarchingCube>>(null)
+  const cubeRefTwo = React.useRef<React.ComponentRef<typeof MarchingCube>>(null)
 
   useFrame(({ clock }) => {
     if (!cubeRefOne.current || !cubeRefTwo.current) return

.storybook/stories/MeshDistortMaterial.stories.tsx

@@ -47,7 +47,7 @@ export const MeshDistortMaterialSt = {
 //
 
 function MeshDistortMaterialRefScene(props: React.ComponentProps<typeof MeshDistortMaterial>) {
-  const material = React.useRef<React.ElementRef<typeof MeshDistortMaterial>>(null!)
+  const material = React.useRef<React.ComponentRef<typeof MeshDistortMaterial>>(null!)
 
   useFrame(({ clock }) => {
     material.current.distort = Math.sin(clock.getElapsedTime())

.storybook/stories/MeshRefractionMaterial.stories.tsx

@@ -39,7 +39,7 @@ function Diamond({
   rotation: React.ComponentProps<'mesh'>['rotation']
   position: React.ComponentProps<'mesh'>['position']
 } & React.ComponentProps<typeof MeshRefractionMaterial>) {
-  const ref = React.useRef<React.ElementRef<'mesh'>>(null)
+  const ref = React.useRef<React.ComponentRef<'mesh'>>(null)
   const { nodes } = useGLTF('/dflat.glb') as any
   // Use a custom envmap/scene-backdrop for the diamond material
   // This way we can have a clear BG while cube-cam can still film other objects
@@ -74,9 +74,9 @@ function RefractionScene(props: React.ComponentProps<typeof MeshRefractionMateri
   return (
     <>
       <color attach="background" args={['#f0f0f0']} />
-      <ambientLight intensity={0.5} />
-      <spotLight position={[5, 5, -10]} angle={0.15} penumbra={1} />
-      <pointLight position={[-10, -10, -10]} />
+      <ambientLight intensity={0.5 * Math.PI} />
+      <spotLight position={[5, 5, -10]} angle={0.15} penumbra={1} decay={0} />
+      <pointLight position={[-10, -10, -10]} decay={0} />
 
       <Diamond rotation={[0, 0, 0.715]} position={[0, -0.175 + 0.5, 0]} {...props} />
 
@@ -110,7 +110,14 @@ function RefractionScene(props: React.ComponentProps<typeof MeshRefractionMateri
         scale={12}
         position={[0, -0.5, 0]}
       >
-        <RandomizedLight amount={8} radius={10} ambient={0.5} intensity={1} position={[5, 5, -10]} bias={0.001} />
+        <RandomizedLight
+          amount={8}
+          radius={10}
+          ambient={0.5}
+          intensity={1 * Math.PI}
+          position={[5, 5, -10]}
+          bias={0.001}
+        />
       </AccumulativeShadows>
       <Environment files="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/aerodynamics_workshop_1k.hdr" />
       <OrbitControls makeDefault autoRotate autoRotateSpeed={0.1} minPolarAngle={0} maxPolarAngle={Math.PI / 2} />

.storybook/stories/MeshTransmissionMaterial.stories.tsx

@@ -56,7 +56,7 @@ function GelatinousCube(props: React.ComponentProps<typeof MeshTransmissionMater
 function MeshTransmissionMaterialScene(props: React.ComponentProps<typeof MeshTransmissionMaterial>) {
   return (
     <>
-      <ambientLight />
+      <ambientLight intensity={Math.PI} />
       <group position={[0, -2.5, 0]}>
         <Center top>
           <GelatinousCube {...props} />
@@ -70,7 +70,7 @@ function MeshTransmissionMaterialScene(props: React.ComponentProps<typeof MeshTr
           opacity={0.8}
           scale={20}
         >
-          <RandomizedLight radius={10} ambient={0.5} intensity={1} position={[2.5, 8, -2.5]} bias={0.001} />
+          <RandomizedLight radius={10} ambient={0.5} intensity={1 * Math.PI} position={[2.5, 8, -2.5]} bias={0.001} />
         </AccumulativeShadows>
       </group>
       <OrbitControls minPolarAngle={0} maxPolarAngle={Math.PI / 2} autoRotate autoRotateSpeed={0.05} makeDefault />

.storybook/stories/MeshWobbleMaterial.stories.tsx

@@ -45,7 +45,7 @@ export const MeshWobbleMaterialSt = {
 //
 
 function MeshWobbleMaterialRefScene(props: React.ComponentProps<typeof MeshWobbleMaterial>) {
-  const material = React.useRef<React.ElementRef<typeof MeshWobbleMaterial>>(null)
+  const material = React.useRef<React.ComponentRef<typeof MeshWobbleMaterial>>(null)
 
   useFrame(({ clock }) => {
     if (material.current === null) return

.storybook/stories/OrbitControls.stories.tsx

@@ -50,7 +50,7 @@ const CustomCamera = (props: OrbitControlsProps) => {
    * we will render our scene in a render target and use it as a map.
    */
   const fbo = useFBO(400, 400)
-  const virtualCamera = useRef<React.ElementRef<typeof PerspectiveCamera> | null>(null)
+  const virtualCamera = useRef<React.ComponentRef<typeof PerspectiveCamera> | null>(null)
   const [virtualScene] = useState(() => new Scene())
 
   useFrame(({ gl }) => {

.storybook/stories/Reflector.stories.tsx

@@ -42,7 +42,7 @@ function ReflectorScene({
   const roughnessMap = useTexture('roughness_floor.jpeg')
   const normalMap = useTexture('NORM.jpg')
   const distortionMap = useTexture('dist_map.jpeg')
-  const $box = React.useRef<React.ElementRef<typeof TorusKnot>>(null!)
+  const $box = React.useRef<React.ComponentRef<typeof TorusKnot>>(null!)
 
   React.useEffect(() => {
     distortionMap.wrapS = distortionMap.wrapT = RepeatWrapping
@@ -76,7 +76,7 @@ function ReflectorScene({
       <TorusKnot args={[0.5, 0.2, 128, 32]} ref={$box} position={[0, 1, 0]}>
         <meshPhysicalMaterial color="hotpink" />
       </TorusKnot>
-      <spotLight intensity={1} position={[10, 6, 10]} penumbra={1} angle={0.3} />
+      <spotLight intensity={1 * Math.PI} position={[10, 6, 10]} penumbra={1} angle={0.3} decay={0} />
       <Environment preset="city" />
     </>
   )

.storybook/stories/RoundedBox.stories.tsx

@@ -22,7 +22,7 @@ export default {
 type Story = StoryObj<typeof RoundedBox>
 
 function RoundedBoxScene(props: React.ComponentProps<typeof RoundedBox>) {
-  const ref = useTurntable<React.ElementRef<typeof RoundedBox>>()
+  const ref = useTurntable<React.ComponentRef<typeof RoundedBox>>()
 
   return (
     <RoundedBox ref={ref} {...props}>
@@ -44,11 +44,11 @@ export const RoundedBoxSt = {
 //
 
 function RoundedBoxScene2(props: React.ComponentProps<typeof RoundedBox>) {
-  const ref = useTurntable<React.ElementRef<typeof RoundedBox>>()
+  const ref = useTurntable<React.ComponentRef<typeof RoundedBox>>()
 
   return (
     <>
-      <spotLight position={[35, 35, 35]} intensity={2} />
+      <spotLight position={[35, 35, 35]} intensity={2 * Math.PI} decay={0} />
       <RoundedBox ref={ref} {...props}>
         <meshPhongMaterial color="#f3f3f3" />
       </RoundedBox>