fix: Correct JSX module augmentation for React 19 types

babel.config.js

@@ -17,7 +17,7 @@ module.exports = {
         targets: '> 1%, not dead, not ie 11, not op_mini all',
       },
     ],
-    '@babel/preset-react',
+    ['@babel/preset-react', { runtime: 'automatic' }],
     '@babel/preset-typescript',
   ],
 }

example/tsconfig.json

@@ -13,7 +13,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx"
   },
   "include": ["./src", "./typings/*.d.ts", "../packages/*"]
 }

package.json

@@ -33,7 +33,7 @@
     "eslint:fix": "yarn run eslint --fix",
     "test": "jest --coverage",
     "test:watch": "jest --watchAll",
-    "typecheck": "tsc --noEmit --emitDeclarationOnly false --strict --jsx react",
+    "typecheck": "tsc --noEmit --emitDeclarationOnly false --strict",
     "validate": "preconstruct validate",
     "release": "yarn build && yarn changeset publish",
     "vers": "yarn changeset version",
@@ -51,10 +51,10 @@
     "@preconstruct/cli": "^2.1.5",
     "@testing-library/react": "^13.0.0-alpha.5",
     "@types/jest": "^29.2.5",
-    "@types/react": "^18.0.5",
-    "@types/react-dom": "^18.0.1",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-native": "0.67.4",
-    "@types/react-test-renderer": "^17.0.1",
+    "@types/react-test-renderer": "^18.3.0",
     "@types/scheduler": "^0.16.2",
     "@types/three": "^0.139.0",
     "@typescript-eslint/eslint-plugin": "^5.48.1",

packages/fiber/src/core/index.tsx

@@ -469,7 +469,7 @@ export type InjectState = Partial<
   }
 >
 
-function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): JSX.Element {
+function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.JSX.Element {
   return <Portal key={container.uuid} children={children} container={container} state={state} />
 }
 
@@ -481,7 +481,7 @@ function Portal({
   children: React.ReactNode
   state?: InjectState
   container: THREE.Object3D
-}): JSX.Element {
+}): React.JSX.Element {
   /** This has to be a component because it would not be able to call useThree/useStore otherwise since
    *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
    *  the "R3F hooks can only be used within the Canvas component!" warning:

packages/fiber/src/three-types.ts

@@ -1,4 +1,7 @@
 import * as THREE from 'three'
+import type {} from 'react'
+import type {} from 'react/jsx-runtime'
+import type {} from 'react/jsx-dev-runtime'
 import { EventHandlers } from './core/events'
 import { AttachType } from './core/renderer'
 
@@ -450,8 +453,27 @@ export interface ThreeElements {
   shape: ShapeProps
 }
 
+// NOTE: removed in v9 for React 19
 declare global {
   namespace JSX {
     interface IntrinsicElements extends ThreeElements {}
   }
 }
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements extends ThreeElements {}
+  }
+}
+
+declare module 'react/jsx-runtime' {
+  namespace JSX {
+    interface IntrinsicElements extends ThreeElements {}
+  }
+}
+
+declare module 'react/jsx-dev-runtime' {
+  namespace JSX {
+    interface IntrinsicElements extends ThreeElements {}
+  }
+}

packages/fiber/tests/core/renderer.test.tsx

@@ -929,7 +929,7 @@ describe('renderer', () => {
     const one = jest.fn()
     const two = jest.fn()
 
-    const Test = (props: Partial<JSX.IntrinsicElements['mesh']>) => <mesh {...props} />
+    const Test = (props: Partial<React.JSX.IntrinsicElements['mesh']>) => <mesh {...props} />
     await act(async () => root.render(<Test onUpdate={one} />))
     await act(async () => root.render(<Test onUpdate={two} />))
 
@@ -961,7 +961,7 @@ describe('renderer', () => {
     const child = React.createRef<THREE.Object3D>()
     const attachedChild = React.createRef<THREE.Object3D>()
 
-    const Test = (props: JSX.IntrinsicElements['primitive']) => (
+    const Test = (props: React.JSX.IntrinsicElements['primitive']) => (
       <primitive {...props} ref={ref}>
         <object3D ref={child} />
         <object3D ref={attachedChild} attach="userData-attach" />

tsconfig.json

@@ -5,7 +5,7 @@
     "module": "commonjs",
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "pretty": true,
     "strict": true,
     "skipLibCheck": true,

yarn.lock

@@ -2947,10 +2947,10 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
-"@types/react-dom@^18.0.0", "@types/react-dom@^18.0.1":
-  version "18.0.1"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.1.tgz#cb3cc10ea91141b12c71001fede1017acfbce4db"
-  integrity sha512-jCwTXvHtRLiyVvKm9aEdHXs8rflVOGd5Sl913JZrPshfXjn8NYsTNZOz70bCsA31IR0TOqwi3ad+X4tSCBoMTw==
+"@types/react-dom@^18.0.0", "@types/react-dom@^18.3.0":
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
+  integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
   dependencies:
     "@types/react" "*"
 
@@ -2975,38 +2975,19 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-test-renderer@^17.0.1":
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.2.tgz#5f800a39b12ac8d2a2149e7e1885215bcf4edbbf"
-  integrity sha512-+F1KONQTBHDBBhbHuT2GNydeMpPuviduXIVJRB7Y4nma4NR5DrTJfMMZ+jbhEHbpwL+Uqhs1WXh4KHiyrtYTPg==
-  dependencies:
-    "@types/react" "^17"
-
-"@types/react@*", "@types/react@^18.0.5":
-  version "18.0.5"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.5.tgz#1a4d4b705ae6af5aed369dec22800b20f89f5301"
-  integrity sha512-UPxNGInDCIKlfqBrm8LDXYWNfLHwIdisWcsH5GpMyGjhEDLFgTtlRBaoWuCua9HcyuE0rMkmAeZ3FXV1pYLIYQ==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@^17":
-  version "17.0.44"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7"
-  integrity sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==
+"@types/react-test-renderer@^18.3.0":
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.3.0.tgz#839502eae70058a4ae161f63385a8e7929cef4c0"
+  integrity sha512-HW4MuEYxfDbOHQsVlY/XtOvNHftCVEPhJF2pQXXwcUiUF+Oyb0usgp48HSgpK5rt8m9KZb22yqOeZm+rrVG8gw==
   dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
+    "@types/react" "*"
 
-"@types/react@^18.2.47":
-  version "18.2.47"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.47.tgz#85074b27ab563df01fbc3f68dc64bf7050b0af40"
-  integrity sha512-xquNkkOirwyCgoClNk85BjP+aqnIS+ckAJ8i37gAbDs14jfW/J23f2GItAf33oiUPQnqNMALiFeoM9Y5mbjpVQ==
+"@types/react@*", "@types/react@^18.2.47", "@types/react@^18.3.1":
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.1.tgz#fed43985caa834a2084d002e4771e15dfcbdbe8e"
+  integrity sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==
   dependencies:
     "@types/prop-types" "*"
-    "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/[email protected]":
@@ -3016,7 +2997,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/scheduler@*", "@types/scheduler@^0.16.2":
+"@types/scheduler@^0.16.2":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==