diff --git a/package.json b/package.json index f0dfc2fe0a..ff1c7bd5a3 100644 --- a/package.json +++ b/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", diff --git a/packages/fiber/src/core/renderer.tsx b/packages/fiber/src/core/renderer.tsx index 30b1d7330d..a2aeb4bcc8 100644 --- a/packages/fiber/src/core/renderer.tsx +++ b/packages/fiber/src/core/renderer.tsx @@ -474,7 +474,7 @@ function Provider({ children, onCreated, rootElement, -}: ProviderProps): JSX.Element { +}: ProviderProps): React.JSX.Element { useIsomorphicLayoutEffect(() => { const state = store.getState() // Flag the canvas active, rendering will now begin @@ -529,7 +529,7 @@ export type InjectState = Partial< } > -export function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): JSX.Element { +export function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.JSX.Element { return } @@ -539,7 +539,7 @@ interface PortalProps { container: THREE.Object3D } -function Portal({ state = {}, children, container }: PortalProps): JSX.Element { +function Portal({ state = {}, children, container }: PortalProps): 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: diff --git a/packages/fiber/src/three-types.ts b/packages/fiber/src/three-types.ts index 89a05a014e..82a02f4e87 100644 --- a/packages/fiber/src/three-types.ts +++ b/packages/fiber/src/three-types.ts @@ -1,4 +1,7 @@ import type * as THREE from 'three' +import type {} from 'react' +import type {} from 'react/jsx-runtime' +import type {} from 'react/jsx-dev-runtime' import type { Args, EventHandlers, InstanceProps, ConstructorRepresentation } from './core' type NonFunctionKeys

= { [K in keyof P]-?: P[K] extends Function ? never : K }[keyof P] @@ -66,3 +69,15 @@ declare module 'react' { 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 {} + } +}