feat: react 19 support (#727)

* feat: react 19 support

* fix: tests

* fix: prettier

* chore: fix package ordering

* feat: update to non-rc versions

Author: isaac-mason

.changeset/empty-pears-suffer.md

@@ -0,0 +1,8 @@
+---
+"@react-three/rapier-addons": minor
+"@react-three/rapier": minor
+---
+
+feat: remove deprecated Vector3Array, Vector4Array, Boolean3Array types
+
+use Vector3Tuple, Vector4Tuple, Boolean3Tuple instead

.changeset/pre.json

@@ -0,0 +1,10 @@
+{
+  "mode": "pre",
+  "tag": "canary",
+  "initialVersions": {
+    "demo": "0.0.0",
+    "@react-three/rapier": "1.5.0",
+    "@react-three/rapier-addons": "4.0.1"
+  },
+  "changesets": []
+}

.changeset/rude-keys-carry.md

@@ -0,0 +1,6 @@
+---
+"@react-three/rapier-addons": major
+"@react-three/rapier": major
+---
+
+feat: react 19 support

.github/workflows/r3-rapier-docs.yml

@@ -34,7 +34,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/[email protected]
         with:
-          node-version: 18.x
+          node-version: 22.x
 
       - name: Enable corepack  
         run: corepack enable

.github/workflows/release.yml

@@ -15,10 +15,10 @@ jobs:
       - name: Checkout Repo
         uses: actions/checkout@v3
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 22.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 22
 
       - name: Install Dependencies
         run: yarn --immutable

.github/workflows/test.yml

@@ -12,10 +12,10 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 22.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 22
 
       - name: Enable corepack  
         run: corepack enable

.nvmrc

@@ -0,0 +1 @@
+v22.0.0

demo/package.json

@@ -9,23 +9,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@react-three/csg": "1.1.5",
-    "@react-three/drei": "9.112.0",
-    "@react-three/fiber": "8.17.7",
+    "@react-three/csg": "3.3.0",
+    "@react-three/drei": "10.0.1",
+    "@react-three/fiber": "9.0.4",
     "@react-three/rapier": "1.5.0",
     "@react-three/rapier-addons": "4.0.1",
-    "@types/three": "0.168.0",
-    "leva": "0.9.35",
-    "r3f-perf": "7.2.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-router-dom": "6.4.3",
-    "three": "0.168.0"
+    "@types/three": "0.172.0",
+    "leva": "0.10.0",
+    "r3f-perf": "7.2.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-router-dom": "7.1.3",
+    "three": "0.172.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "4.3.1",
-    "typescript": "4.6.3",
-    "vite": "3.0.3"
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
+    "@vitejs/plugin-react": "4.3.4",
+    "typescript": "5.7.3",
+    "vite": "6.0.11"
   },
   "repository": "https://github.com/pmndrs/react-three-rapier/tree/master/demo"
 }

demo/src/App.tsx

@@ -3,6 +3,7 @@ import { Canvas } from "@react-three/fiber";
 import { Physics, RigidBody } from "@react-three/rapier";
 import { Perf } from "r3f-perf";
 import {
+  JSX,
   ReactNode,
   StrictMode,
   Suspense,
@@ -117,7 +118,7 @@ export const App = () => {
   const [interpolate, setInterpolate] = useState<boolean>(true);
   const [physicsKey, setPhysicsKey] = useState<number>(0);
   const [cameraEnabled, setCameraEnabled] = useState<boolean>(true);
-  const orbitControlRef = useRef<OrbitControlsImpl>(null);
+  const orbitControlRef = useRef<OrbitControlsImpl>(null!);
 
   useResetOrbitControls();
 

demo/src/examples/all-colliders/AllCollidersExample.tsx

@@ -1,5 +1,5 @@
 import { Box, Cone, Cylinder, Html, Sphere } from "@react-three/drei";
-import { MeshProps, Object3DProps } from "@react-three/fiber";
+import { ThreeElements } from "@react-three/fiber";
 import {
   BallCollider,
   CapsuleCollider,
@@ -21,7 +21,10 @@ import { PlaneGeometry } from "three";
 import { useEffect, useRef } from "react";
 import { useResetOrbitControls } from "../../hooks/use-reset-orbit-controls";
 
-const CuteBox = (props: Omit<MeshProps, "args">) => (
+type Object3DProps = ThreeElements["object3D"];
+type MeshProps = ThreeElements["mesh"];
+
+const CuteBox = (props: Omit<MeshProps, "args" | "ref">) => (
   <Box castShadow receiveShadow {...props}>
     <meshPhysicalMaterial color="orange" />
   </Box>