Skip to content

fix(deps): update dependency @react-three/fiber to v9#12

Closed
SamuelIVX wants to merge 1 commit into
mainfrom
renovate/react-three-fiber-9.x
Closed

fix(deps): update dependency @react-three/fiber to v9#12
SamuelIVX wants to merge 1 commit into
mainfrom
renovate/react-three-fiber-9.x

Conversation

@SamuelIVX
Copy link
Copy Markdown
Owner

@SamuelIVX SamuelIVX commented Jan 29, 2026

This PR contains the following updates:

Package Change Age Confidence
@react-three/fiber ^8.17.12^9.0.0 age confidence

Release Notes

pmndrs/react-three-fiber (@​react-three/fiber)

v9.5.0

Compare Source

After a bit of research and development, R3F is now compatible with React 19.2, including the Activity feature!

Why did this take some effort, you might wonder? When React bumped to version 19.2.x, they also bumped the internal reconciler up a version which was not backwards compatible with 19.1.x. This put us in an awkward position of either making a breaking change in the middle of R3F v9, bump to another major just because of an internal detail from React or get creative. We chose to get creative and R3F is compatible with all versions of React between 19.0 and 19.2. The downside is we had to bundle the reconciler with R3F, but react-dom already does this so for now it is the best solution available.

Forcing breaking changes on libraries is likely not what the React teams intended so we will be working with them to try to avoid this in the future.

Happy coding.

What's Changed

Full Changelog: pmndrs/react-three-fiber@v9.4.2...v9.5.0

v9.4.2

Compare Source

What's Changed

New Contributors

Full Changelog: pmndrs/react-three-fiber@v9.4.1...v9.4.2

v9.4.1

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v9.4.0...v9.4.1

v9.4.0

Compare Source

What's Changed

New Contributors

Full Changelog: pmndrs/react-three-fiber@v9.3.0...v9.4.0

v9.3.0

Compare Source

With this release we have two big fixes.

  1. flushSync now works properly. To prove it we added an example that allows you to React props and then take a screenshot of the R3F canvas with the latest state. This is a pretty advanced use case, but one people might be interested to explore for exporting videos or images using R3F.
  2. React Native support has been fixed for 0.79 and newer when combined with the same update to Drei: pmndrs/drei#2494. A big thanks to @​thejustinwalsh for helping us with this one.

What's Changed

New Contributors

Full Changelog: pmndrs/react-three-fiber@v9.1.4...v9.3.0

v9.2.0

Compare Source

v9.1.4

Compare Source

What's Changed

New Contributors

Full Changelog: pmndrs/react-three-fiber@v9.1.3...v9.1.4

v9.1.3

Compare Source

What's Changed

New Contributors

Full Changelog: pmndrs/react-three-fiber@v9.1.2...v9.1.3

v9.1.2

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v9.1.1...v9.1.2

v9.1.1

Compare Source

Most importantly, this fixes rsbuild with vReact 19.1.0 and later.

What's Changed

Full Changelog: pmndrs/react-three-fiber@v9.1.0...v9.1.1

v9.1.0

Compare Source

What's Changed

New Contributors

Full Changelog: pmndrs/react-three-fiber@v9.0.4...v9.1.0

v9.0.4

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v9.0.3...v9.0.4

v9.0.3

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v9.0.2...v9.0.3

v9.0.2

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v9.0.1...v9.0.2

v9.0.1

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v9.0.0...v9.0.1

v9.0.0

Compare Source

This is a compatibility release for React 19, which brings further performance, stability, and type improvements. You can check out the React 19 changelog here.

We would like to express our gratitude to the community for their continued support, as well as to all our contributors, including the React team at Meta and Vercel, for ensuring this upgrade went smoothly. 🎉

[!WARNING]
This release contains breaking changes when using Strict Mode, which can highlight bugs during development. See StrictMode.

Features

useLoader Accepts Loader Instance

useLoader now supports re-use of external loader instances for more controlled pooling and setup.

import { GLTFLoader } from 'three/addons'
import { useLoader } from '@​react-three/fiber'

function Model() {
  const gltf = useLoader(GLTFLoader, '/path/to/model.glb')
  // ...
}

// or,

const loader = new GLTFLoader()
function Model() {
  const gltf = useLoader(loader, '/path/to/model.glb')
  // ...
}
Factory extend Signature

extend can now produce a component when a three.js class is passed to it individually instead of a catalog of named classes. This is backwards compatible and reduces TypeScript boilerplate and JSX collisions. We recommend libraries migrate to this signature so internal components don't clash with user-land declarations.

import { OrbitControls } from 'three/addons'
import { type ThreeElement, type ThreeElements } from '@​react-three/fiber'

declare module '@​react-three/fiber' {
  interface ThreeElements {
    orbitControls: ThreeElement<typeof OrbitControls>
  }
}

extend({ OrbitControls })

<orbitControls args={[camera, gl.domElement]}>

// or,

const Controls = extend(OrbitControls)
<Controls args={[camera, gl.domElement]} />
Async GL prop

The Canvas GL prop accepts constructor parameters, properties, or a renderer instance via a callback. The callback now passes constructor parameters instead of just a canvas reference.

<Canvas
  gl={{ reverseDepthBuffer: true }}
- gl={(canvas) => new WebGLRenderer({ canvas })}
+ gl={(props) => new WebGLRenderer(props)}
>

Further, a callback passed to GL can now return a promise for async constructors like WebGPURenderer (see WebGPU).

<Canvas
  gl={async (props) => {
    // ...
    return renderer
  }}
>

WebGPU

Recent Three.js now includes a WebGPU renderer. While still a work in progress and not fully backward-compatible with all of Three's features, the renderer requires an async initialization method. R3F streamlines this by allowing the gl prop to return a promise.

import * as THREE from 'three/webgpu'
import * as TSL from 'three/tsl'
import { Canvas, extend, useFrame, useThree } from '@&#8203;react-three/fiber'

declare module '@&#8203;react-three/fiber' {
  interface ThreeElements extends ThreeToJSXElements<typeof THREE> {}
}

extend(THREE as any)

export default () => (
  <Canvas
    gl={async (props) => {
      const renderer = new THREE.WebGPURenderer(props as any)
      await renderer.init()
      return renderer
    }}>
      <mesh>
        <meshBasicNodeMaterial />
        <boxGeometry />
      </mesh>
  </Canvas>
)

Fixes

Color Management of Textures

Automatic sRGB conversion of texture props has been removed. Color textures are now handled automatically for built-in materials, aligning with vanilla Three.js behavior. This prevents issues where data textures (e.g., normals or displacement) become corrupted or non-linear. For custom materials or shaders, annotate color textures with texture.colorSpace = THREE.SRGBColorSpace or texture-colorSpace={THREE.SRGBColorSpace} in JSX.

For more details, see https://threejs.org/docs/#manual/en/introduction/Color-management.

Suspense and Side-Effects

The handling of Suspense and fallback content has improved in React and R3F. Side-effects like attach and constructor effects (e.g., controls adding event listeners) no longer fire repeatedly without proper cleanup during suspension.

import { ThreeElement, useThree } from '@&#8203;react-three/fiber'
import { OrbitControls } from 'three/addons'

declare module '@&#8203;react-three/fiber' {
  interface ThreeElements {
    OrbitControls: ThreeElement<typeof OrbitControls>
  }
}

extend({ OrbitControls })

function Controls() {
  const camera = useThree((state) => state.camera)
  const gl = useThree((state) => state.gl)

  // Will only initialize when tree is connected to screen
  return <orbitControls args={[camera, gl.domElement]}>
}

<Suspense>
  <Controls />
  <AsyncComponent />
</Suspense>
Swapping with args and primitives

Swapping elements when changing the args or primitive object prop has been improved for structured children like arrays or iterators (React supports both, including async iterators). Previously, primitives sharing an object could update out of order or be removed from the scene along with their children.

See: #​3272

TypeScript Changes

Props renamed to CanvasProps

Canvas Props is now called CanvasProps for clarity. These were aliased in v8 for forward compatibility, but Props is removed with v9.

-function Canvas(props: Props)
+function Canvas(props: CanvasProps)
Dynamic JSX Types

Since R3F's creation, JSX types had to be maintained in accordance with additions to three core API. Although missing or future types could be ignored or resilient for forward and backwards compatibility, this was a major maintenance burden for us and those extending three. Furthermore, libraries which wrap or bind to the known catalog of elements (e.g. React Spring <animated.mesh />) had no way of knowing which elements belonged to a renderer.

Since v8, we've added a catalog of known elements to a ThreeElements interface, and with v9 automatically map three API to JSX types. As types are now dynamically mapped, hardcoded exports like MeshProps have been removed, and can be accessed as ThreeElements['mesh']. Helper types like Color or Vector3 remain to reflect the JSX MathType API for shorthand expression.

-import { MeshProps } from '@&#8203;react-three/fiber'
-type Props = MeshProps

+import { ThreeElements } from '@&#8203;react-three/fiber'
+type Props = ThreeElements['mesh']
Node Helpers

Specialized Node type helpers for extending JSX (Node, Object3DNode, BufferGeometryNode, MaterialNode, LightNode) are removed and combined into 'ThreeElement', which accepts a single type representing the extended element instance.

import { type ThreeElement } from '@&#8203;react-three/fiber'

declare module '@&#8203;react-three/fiber' {
  interface ThreeElements {
    customElement: ThreeElement<typeof CustomElement>
  }
}

extend({ CustomElement })
ThreeElements

ThreeElements was added as an interface since v8.1.0 and is the current way of declaring or accessing JSX within R3F since React's depreciation of global JSX (see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript). All JSX types belonging to R3F are accessible from ThreeElements.

-import { type Node } from '@&#8203;react-three/fiber'
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      customElement: Node<CustomElement, typeof CustomElement>
-    }
-  }
-}
-
-extend({ CustomElement })

+import { type ThreeElement } from '@&#8203;react-three/fiber'
+
+declare module '@&#8203;react-three/fiber' {
+  interface ThreeElements {
+    customElement: ThreeElement<typeof CustomElement>
+  }
+}
+
+extend({ CustomElement })

Testing

StrictMode

StrictMode is now correctly inherited from a parent renderer like react-dom. Previously, <StrictMode /> mounted in another root such as react-dom would not affect the R3F canvas, so it had to be redeclared within the canvas as well.

<StrictMode>
  <Canvas>
-    <StrictMode>
-      // ...
-    </StrictMode>
+    // ...
  </Canvas>
</StrictMode>

Keep in mind, this change may affect the behavior of your application. If you encounter anything that worked before and fails now, profile it first in dev and then production. If it works in prod then strict mode has flushed out a side-effect in your code.

Act

act is now exported from React itself and can be used for all renderers. It will return the contents of a passed async callback like before and recursively flush async effects to synchronously test React output.

import { act } from 'react'
import { createRoot } from '@&#8203;react-three/fiber'

const store = await act(async () => createRoot(canvas).render(<App />))
console.log(store.getState())

Full Changelog: pmndrs/react-three-fiber@v8.18.0...v9.0.0


Configuration

📅 Schedule: Branch creation - "every weekday" in timezone America/New_York, Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.


  • If you want to rebase/retry this PR, check this box

This PR has been generated by Renovate Bot.

@SamuelIVX
Copy link
Copy Markdown
Owner Author

SamuelIVX commented Jan 29, 2026

⚠️ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

  • any of the package files in this branch needs updating, or
  • the branch becomes conflicted, or
  • you click the rebase/retry checkbox if found above, or
  • you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json
npm warn Unknown env config "store". This will stop working in the next major version of npm.
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: personal_website@0.0.0
npm error Found: react@18.3.1
npm error node_modules/react
npm error   react@"^18.3.1" from the root project
npm error   peer react@"*" from expo@54.0.32
npm error   node_modules/expo
npm error     peerOptional expo@">=43.0" from @react-three/fiber@9.5.0
npm error     node_modules/@react-three/fiber
npm error       @react-three/fiber@"^9.0.0" from the root project
npm error     peer expo@"*" from @expo/dom-webview@0.2.8
npm error     node_modules/@expo/dom-webview
npm error       peerOptional @expo/dom-webview@"*" from expo@54.0.32
npm error     4 more (@expo/metro-runtime, expo-asset, expo-file-system, expo-gl)
npm error   9 more (@expo/dom-webview, @expo/metro-runtime, react-dom, ...)
npm error
npm error Could not resolve dependency:
npm error peer react@">=19 <19.3" from @react-three/fiber@9.5.0
npm error node_modules/@react-three/fiber
npm error   @react-three/fiber@"^9.0.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /tmp/renovate/cache/others/npm/_logs/2026-01-29T23_07_17_421Z-eresolve-report.txt
npm error A complete log of this run can be found in: /tmp/renovate/cache/others/npm/_logs/2026-01-29T23_07_17_421Z-debug-0.log

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Jan 29, 2026

📝 Walkthrough

Walkthrough

A version upgrade of the @react-three/fiber dependency from ^8.17.12 to ^9.0.0 in package.json. No other dependencies, scripts, or public entities were modified.

Changes

Cohort / File(s) Summary
Dependency Version Upgrade
package.json
Bumped @react-three/fiber from ^8.17.12 to ^9.0.0 (major version update).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related issues

  • Issue #2: PR directly addresses the objective of updating @react-three/fiber to v9 in package.json.

Poem

🐇 A hop, a bump, the fiber climbs to nine,
Smooth lines of code in a bright new design,
I nibble a carrot, I cheer and I spin,
Rendering sharper—let the new run begin! ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and accurately describes the main change: updating the @react-three/fiber dependency to v9, which is the primary focus of this PR.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch renovate/react-three-fiber-9.x

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@package.json`:
- Line 18: package.json updates introduced incompatible peer deps:
`@react-three/fiber`@9 conflicts with current react@^18.3.1 and
`@react-three/drei`@9 requires `@react-three/fiber`@^8; fix by choosing one
resolution path and applying it to package.json: either downgrade
`@react-three/fiber` to a v8.x release that satisfies `@react-three/drei`@9 and
React 18, or upgrade React to v19 and also align `@react-three/drei` to a version
compatible with fiber@9 (and audit other deps like expo/type defs for React 19
compatibility), or revert the fiber bump and wait for drei to release fiber@9
support—update the dependency entries for "@react-three/fiber", "react", and
"@react-three/drei" accordingly and run npm install to verify no peer conflicts.
📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 659491b and 6865a02.

📒 Files selected for processing (1)
  • package.json

✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.

Comment thread package.json
"@emailjs/browser": "^4.4.1",
"@react-three/drei": "^9.121.2",
"@react-three/fiber": "^8.17.12",
"@react-three/fiber": "^9.0.0",
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash

echo "=== Checking `@react-three/fiber` v9 peer deps ==="
npm view `@react-three/fiber`@9 peerDependencies --json 2>/dev/null | jq .

echo -e "\n=== Checking `@react-three/drei` v9 peer deps ==="
npm view `@react-three/drei`@9.121.2 peerDependencies --json 2>/dev/null | jq .

echo -e "\n=== Current React version in package.json ==="
cat package.json | jq '.dependencies.react'

echo -e "\n=== Current react-three/fiber spec ==="
cat package.json | jq '.dependencies."@react-three/fiber"'

echo -e "\n=== Current react-three/drei spec ==="
cat package.json | jq '.dependencies."@react-three/drei"'

Repository: SamuelIVX/SamuelIVX.github.io

Length of output: 3982


Peer dependency conflicts prevent installation: @react-three/fiber v9 and @react-three/drei v9 are incompatible.

This PR update cannot be merged as-is due to multiple conflicting peer dependencies:

  1. @react-three/fiber@9 requires react ">=19 <19.3", but the project has react@^18.3.1
  2. @react-three/drei@9.121.2 requires @react-three/fiber@^8 (not v9), while also requiring react@^18

The package versions in this PR are internally inconsistent and npm install will fail.

To resolve, choose one:

  • Downgrade @react-three/fiber to v8 (compatible with React 18 and @react-three/drei v9)
  • Upgrade React to v19 AND downgrade @react-three/drei to a version compatible with both React 19 and @react-three/fiber v9, then verify all other dependencies (expo packages, type definitions) support React 19
  • Wait for @react-three/drei to release a version supporting @react-three/fiber v9 with React 19
🤖 Prompt for AI Agents
In `@package.json` at line 18, package.json updates introduced incompatible peer
deps: `@react-three/fiber`@9 conflicts with current react@^18.3.1 and
`@react-three/drei`@9 requires `@react-three/fiber`@^8; fix by choosing one
resolution path and applying it to package.json: either downgrade
`@react-three/fiber` to a v8.x release that satisfies `@react-three/drei`@9 and
React 18, or upgrade React to v19 and also align `@react-three/drei` to a version
compatible with fiber@9 (and audit other deps like expo/type defs for React 19
compatibility), or revert the fiber bump and wait for drei to release fiber@9
support—update the dependency entries for "@react-three/fiber", "react", and
"@react-three/drei" accordingly and run npm install to verify no peer conflicts.

@SamuelIVX SamuelIVX force-pushed the renovate/react-three-fiber-9.x branch from 6865a02 to 3398543 Compare January 29, 2026 23:07
@SamuelIVX SamuelIVX closed this Feb 6, 2026
@SamuelIVX
Copy link
Copy Markdown
Owner Author

Renovate Ignore Notification

Because you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future 9.x releases. But if you manually upgrade to 9.x then Renovate will re-enable minor and patch updates automatically.

If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR.

@SamuelIVX SamuelIVX deleted the renovate/react-three-fiber-9.x branch February 6, 2026 02:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants