fix: changes to make this library works in React 19

package.json

@@ -1,18 +1,20 @@
 {
   "name": "react-stl-viewer",
-  "version": "2.5.0",
+  "version": "3.0.0",
   "description": "react component for visualizing 3d models in the browser using three.js",
   "author": "Gabriel Musat",
   "license": "MIT",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.3",
+    "@react-three/fiber": "^9.0.0",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-links": "^6.5.9",
     "@storybook/react": "^6.5.9",
     "@types/jest": "^28.1.1",
+    "@types/node": "^20.19.32",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "@types/three": "^0.157.0",
@@ -25,8 +27,8 @@
     "eslint-plugin-promise": "^6.1.0",
     "jest": "^28.1.1",
     "postcss": "^8.4.14",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rollup": "^3.2.5",
     "rollup-plugin-dts": "^5.0.0",
     "rollup-plugin-filesize": "^9.1.2",
@@ -35,17 +37,26 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.34.1",
     "three": "^0.160.0",
+    "three-stdlib": "^2.32.2",
     "ts-jest": "^28.0.5",
-    "typescript": "^4.7.3"
+    "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@react-three/fiber": "^8.15.5",
-    "three-stdlib": "2.17.2"
   },
   "peerDependencies": {
-    "react": ">=18.0",
-    "react-dom": ">=18.0",
-    "three": ">=0.154"
+    "@react-three/fiber": "^8.17.0 || ^9.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "three": ">=0.154",
+    "three-stdlib": "^2.32.0"
+  },
+  "peerDependenciesMeta": {
+    "@react-three/fiber": {
+      "optional": false
+    },
+    "three-stdlib": {
+      "optional": false
+    }
   },
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

rollup.config.mjs

@@ -21,6 +21,18 @@ export default [
                 format: "esm",
             },
         ],
+        external: (id) => {
+            return (
+                id === 'react' ||
+                id === 'react-dom' ||
+                id === 'three' ||
+                id.startsWith('react/') ||
+                id.startsWith('react-dom/') ||
+                id.startsWith('@react-three/fiber') ||
+                id.startsWith('three/') ||
+                id.startsWith('three-stdlib/')
+            );
+        },
         plugins: [
             peerDepsExternal(),
             commonjs(),

src/StlViewer/ErrorBoundary.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
-interface IProps extends React.PropsWithChildren {
+interface IProps {
+  children?: React.ReactNode
   onError?: (err: Error) => void
 }
 
@@ -11,18 +12,15 @@ interface IState {
 class ErrorBoundary extends React.Component<IProps, IState> {
   state = { message: '' }
 
-  shouldComponentUpdate (nextProps: Readonly<IProps>, nextState: Readonly<IState>, nextContext: any): boolean {
-    if ((this.state.message === '') && (nextState.message !== '') && (nextProps.onError != null)) {
-      nextProps.onError(new Error(nextState.message))
-    }
-    return true
-  }
-
   static getDerivedStateFromError (error: Error): IState {
     return { message: error.message }
   }
 
-  componentDidCatch (): void {}
+  componentDidCatch (error: Error): void {
+    if (this.props.onError != null) {
+      this.props.onError(error)
+    }
+  }
 
   render (): React.ReactNode {
     if (this.state.message !== '') return null

src/StlViewer/SceneElements/Camera.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react'
-import { PerspectiveCameraProps, useThree } from '@react-three/fiber'
+import { useThree } from '@react-three/fiber'
 import { Vector3 } from 'three'
+import '@react-three/fiber'
 
 export interface CameraPosition {
   latitude: number
@@ -11,7 +12,7 @@ export interface CameraPosition {
 /** @deprecated use {@link CameraPosition} instead */
 export type CameraInitialPosition = CameraPosition
 
-export interface CameraProps extends Partial<PerspectiveCameraProps> {
+export interface CameraProps extends Partial<React.ComponentProps<'perspectiveCamera'>> {
   initialPosition: CameraPosition
   center: [number, number, number]
 }

src/StlViewer/SceneElements/Floor.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
-import { GroupProps } from '@react-three/fiber'
+import '@react-three/fiber'
 
 const BIG_NUM = 2**16
 
+type GroupProps = React.ComponentProps<'group'>
+
 export interface FloorProps extends GroupProps {
   visible?: boolean
   width?: number

src/StlViewer/SceneElements/Model3D.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { Box3, BufferGeometry, DoubleSide, Group, Matrix4, Mesh } from 'three'
-import { GroupProps, MeshProps, MeshStandardMaterialProps, useFrame } from '@react-three/fiber'
+import { useFrame } from '@react-three/fiber'
+import '@react-three/fiber'
 
 export interface ModelDimensions {
   boundingRadius: number
@@ -9,12 +10,12 @@ export interface ModelDimensions {
   height: number
 }
 
-export interface Model3DProps extends Omit<GroupProps, 'scale'> {
+export interface Model3DProps extends Omit<React.ComponentProps<'group'>, 'scale'> {
   scale?: number
   visible?: boolean
   geometry: BufferGeometry
-  meshProps: MeshProps
-  materialProps: MeshStandardMaterialProps
+  meshProps: React.ComponentProps<'mesh'>
+  materialProps: React.ComponentProps<'meshStandardMaterial'>
   onLoaded: (dims: ModelDimensions, mesh: Mesh, group: Group) => any
 }
 

src/StlViewer/SceneElements/OrbitControls.tsx

@@ -1,9 +1,10 @@
-import { EventManager, PrimitiveProps, useFrame, useThree } from '@react-three/fiber'
+import { EventManager, useFrame, useThree } from '@react-three/fiber'
 import { useEffect } from 'react'
 import * as React from 'react'
-import { OrbitControls as StdOrbitControls } from 'three-stdlib/controls/OrbitControls'
+import { OrbitControls as StdOrbitControls } from 'three-stdlib'
+import '@react-three/fiber'
 
-export interface OrbitControlsProps extends Omit<PrimitiveProps, 'object'> {}
+export interface OrbitControlsProps extends Omit<React.ComponentProps<'primitive'>, 'object'> {}
 
 const OrbitControls: React.FC<OrbitControlsProps> = (props) => {
   const camera = useThree((state) => state.camera)

src/StlViewer/SceneSetup.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties, useEffect, useMemo, useState } from 'react'
-import { useFrame, useLoader, useThree } from '@react-three/fiber'
-import { STLLoader } from 'three-stdlib/loaders/STLLoader'
+import { useFrame, useThree } from '@react-three/fiber'
+import { STLLoader } from 'three-stdlib'
 import { Box3, BufferGeometry, Color, Group, Mesh } from 'three'
 import { STLExporter } from './exporters/STLExporter'
 import Model3D, { ModelDimensions } from './SceneElements/Model3D'
@@ -59,6 +59,7 @@ export interface SceneSetupProps {
   cameraProps?: CameraProps
   modelProps?: ModelProps
   floorProps?: FloorProps
+  children?: React.ReactNode
 }
 
 const SceneSetup: React.FC<SceneSetupProps> = (
@@ -113,18 +114,38 @@ const SceneSetup: React.FC<SceneSetupProps> = (
 
   const [modelCenter, setModelCenter] = useState<[number, number, number]>([0, 0, 0])
   const [sceneReady, setSceneReady] = useState(false)
+  const [geometry, setGeometry] = useState<BufferGeometry | null>(null)
+  const [loadError, setLoadError] = useState<Error | null>(null)
+
+  // Manual loading to avoid React 19 Suspense issues with useLoader
   useEffect(() => {
     setSceneReady(false)
-  }, [url])
+    setGeometry(null)
+    setLoadError(null)
 
-  const geometry = useLoader(
-    STLLoader,
-    url,
-    (loader) => loader.setRequestHeader(extraHeaders ?? {})
-  )
+    const loader = new STLLoader()
+
+    // Set extra headers if provided
+    if (extraHeaders) {
+      loader.setRequestHeader(extraHeaders)
+    }
+
+    loader.load(
+      url,
+      (loadedGeometry) => {
+        setGeometry(loadedGeometry)
+      },
+      undefined,
+      (error) => {
+        console.error('Error loading STL:', error)
+        const err = error instanceof Error ? error : new Error(String(error))
+        setLoadError(err)
+      }
+    )
+  }, [url, extraHeaders])
 
   const processedGeometry = useMemo(
-    () => geometryProcessor?.(geometry) ?? geometry,
+    () => geometry && geometryProcessor ? geometryProcessor(geometry) : geometry,
     [geometry, geometryProcessor]
   )
 
@@ -178,6 +199,7 @@ const SceneSetup: React.FC<SceneSetupProps> = (
   useFrame(({ scene }) => {
     const mesh = scene.getObjectByName('mesh') as Mesh
     const group = scene.getObjectByName('group') as Group
+    if (!mesh || !group) return
     const bbox = new Box3().setFromObject(mesh)
     const height = bbox.max.z-bbox.min.z
     group.position.z = height/2
@@ -189,6 +211,15 @@ const SceneSetup: React.FC<SceneSetupProps> = (
     0
   ]
 
+  if (loadError) {
+    console.error('Failed to load STL model:', loadError)
+    return null
+  }
+
+  if (!processedGeometry) {
+    return null // Still loading
+  }
+
   return (
         <>
             <scene background={BACKGROUND}/>

src/StlViewer/StlViewer.tsx

@@ -9,6 +9,7 @@ type DivProps = Omit<HTMLProps<HTMLDivElement>, 'color' | 'onError'>
 export interface StlViewerProps extends DivProps, SceneSetupProps {
   onError?: (err: Error) => void
   canvasId?: string
+  children?: React.ReactNode
 }
 
 const StlViewer: React.FC<StlViewerProps> = (

tsconfig.json

@@ -3,6 +3,7 @@
     "esModuleInterop": true,
     "strict": true,
     "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
     "jsx": "react",
     "module": "ESNext",
     "declaration": true,
@@ -12,8 +13,9 @@
     "moduleResolution": "node",
     "emitDeclarationOnly": true,
     "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "types": []
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", ".storybook", ".idea", "**/__tests__/**"]
+  "exclude": ["node_modules", ".storybook", ".idea", "**/__tests__/**", "lib"]
 }