React Three Fiber and React 19: the ReactCurrentOwner error

Q: Do I need to upgrade drei too?

Yes. drei 9 asks for fiber 8 and React 18. drei 10 asks for fiber 9 and React 19.

Q: Will --legacy-peer-deps fix it?

No. It only lets npm install fiber 8 next to React 19, which is exactly the pair that fails with this error.

Q: Where did MeshProps go?

Fiber 9 removed it. Use ThreeElements["mesh"] from @react-three/fiber.

Q: Does Next.js 15 work with React Three Fiber?

Yes, with fiber 9 and React 19. Next.js 15 needs React 19, so fiber 8 doesn't fit a new Next.js 15 app.

Q: Does Particle Morph need React Three Fiber?

No. It's plain three.js with its own renderer, so it has no fiber version to match.

Q: Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Q: Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.

"Cannot read properties of undefined (reading 'ReactCurrentOwner')" means @react-three/fiber 8 is running on React 19. Fiber 8 pairs with React 18 and fiber 9 with React 19, so the fix is fiber 9 and drei 10, then a few type changes. If your only 3D is one hero effect, Particle Morph is plain three.js and has no fiber version to match.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

The same scene on fiber 9

components/spinning-box.tsx

"use client";
import { useRef, useState } from "react";
import type { Mesh } from "three";
import { useFrame, type ThreeElements } from "@react-three/fiber";

// v8: import { MeshProps } from "@react-three/fiber". v9 removed it; use ThreeElements["mesh"].
type Props = ThreeElements["mesh"] & { speed?: number };

export function SpinningBox({ speed = 1, ...props }: Props) {
  const mesh = useRef<Mesh>(null);
  const [hovered, setHovered] = useState(false);

  // Mutate in useFrame; don't set state every frame.
  useFrame((_, delta) => {
    if (mesh.current) mesh.current.rotation.y += delta * speed;
  });

  return (
    <mesh {...props} ref={mesh} onPointerOver={() => setHovered(true)} onPointerOut={() => setHovered(false)}>
      <boxGeometry args={[1.4, 1.4, 1.4]} />
      <meshStandardMaterial color={hovered ? "#C6FF3D" : "#8B6CFF"} />
    </mesh>
  );
}

components/scene.tsx

"use client";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { SpinningBox } from "@/components/spinning-box";

export default function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 5], fov: 45 }} dpr={[1, 2]}>
      <ambientLight intensity={0.6} />
      <directionalLight position={[3, 4, 5]} intensity={1.2} />
      <SpinningBox position={[-1.2, 0, 0]} />
      <SpinningBox position={[1.2, 0, 0]} speed={-0.6} />
      <OrbitControls enableZoom={false} />
    </Canvas>
  );
}

components/scene-loader.tsx

"use client";
import dynamic from "next/dynamic";

// ssr: false keeps three.js and WebGL out of the server render.
// In Next.js 15, ssr: false is only allowed inside a client component like this one.
const Scene = dynamic(() => import("@/components/scene"), {
  ssr: false,
  loading: () => <div className="h-full w-full" />,
});

export function SceneLoader() {
  return (
    <div className="h-[420px] w-full">
      <Scene />
    </div>
  );
}

app/r3f/page.tsx

import { SceneLoader } from "@/components/scene-loader";

export default function Page() {
  return (
    <main className="mx-auto max-w-4xl p-6">
      <SceneLoader />
    </main>
  );
}

Good to know

Why it happens: React Three Fiber is a renderer, like react-dom, and its docs say it "must pair with a major version of React": "@react-three/fiber@8 pairs with react@18, @react-three/fiber@9 pairs with react@19." Fiber 8 is built on react-reconciler 0.27, whose peer range is react ^18.0.0. That reconciler reads ReactCurrentOwner from React 18's internal object, and React 19 no longer exports that object, so fiber 8 fails while it loads, before anything renders.
What we checked on October 26, 2026, by loading the packages in Node (not by drawing a scene): with React 19.3.1, @react-three/fiber 8.18.0 fails to load with "TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')", thrown from react-reconciler.development.js line 498. With React 18.3.1 the same package loads, and @react-three/fiber 9.8.2 loads with React 19.3.1. The same error, from the same reconciler line, is in R3F issue #3398 and Next.js issue #71836.
The fix is one install: npm i @react-three/fiber@9 @react-three/drei@10. drei has to move too, because drei 9 asks for fiber 8 and React 18. Then run npm ls @react-three/fiber react and check that only one fiber 9 and one React 19 come back.
If you got fiber 8 installed with --legacy-peer-deps or --force, that flag is what hid the problem. npm warned for a reason: fiber 8.18.0 declares react ">=18 <19".
Next.js 15 sets React 19 as its minimum (Next.js 15 upgrade guide), so a fresh create-next-app project needs fiber 9. If your app has to stay on React 18, stay on fiber 8 and drei 9 together.
Other @react-three packages (postprocessing, rapier, xr and so on) have their own peer ranges. Check each with npm view <package> peerDependencies before you upgrade.

Which versions go together

From the npm registry on October 26, 2026:
@react-three/fiber 8.18.0 (February 19, 2025) asks for react ">=18 <19". It's the last 8.x release.
@react-three/fiber 9.0.0 (February 19, 2025) asks for react ^19.0.0 and three >=0.156.
@react-three/fiber 9.8.2 (October 14, 2026), the latest, asks for react ">=19 <19.4". React's latest is 19.3.1, so that's fine today. When React 19.4 comes out, npm will refuse fiber 9.8.2 next to it until fiber widens the range, so check fiber's releases before you bump React.
@react-three/drei 9.122.0 (February 19, 2025), the last 9.x, asks for react ^18 and fiber ^8. drei 10.7.9 (September 25, 2026) asks for react ^19, fiber ^9.0.0 and three >=0.159.

The v9 changes that break a Next.js build

These come from R3F's v9 migration guide.
MeshProps and the other hardcoded prop types are gone. Use ThreeElements["mesh"], as spinning-box.tsx does. If you import MeshProps on fiber 9, TypeScript stops with "has no exported member 'MeshProps'".
Custom elements: the old declare global { namespace JSX { ... } } block with Node or Object3DNode becomes declare module "@react-three/fiber" { interface ThreeElements { ... } } with ThreeElement<typeof YourClass>.
The Canvas prop type Props is now CanvasProps.
A gl callback now receives the renderer's constructor props, not the canvas: gl={(props) => new WebGLRenderer(props)}.
Textures on custom materials and shaders are no longer converted to sRGB for you. Set texture.colorSpace = THREE.SRGBColorSpace on colour textures.
StrictMode now carries into the canvas from your react-dom root. Next.js turns StrictMode on in development, so effects inside the canvas can run twice there, like the rest of your app's effects. If something breaks only in dev, check it in a production build first.

React Three Fiber particles on fiber 9: drei, useFrame and a morph

Loading R3F in the App Router

R3F's install docs say Next.js should work out of the box, and that untranspiled three.js add-ons need transpilePackages: ['three'] in next.config.
scene-loader.tsx loads the scene with next/dynamic and ssr: false, so three.js never runs on the server. In Next.js 15 ssr: false is only allowed inside a client component, which is why the loader file starts with "use client" and page.tsx stays a server component.

If your only 3D is a hero effect

Particle Morph is plain three.js. It imports useEffect, useRef and three, creates its own WebGLRenderer inside a div, and never touches @react-three/fiber. So there is no fiber version to pair with React, before or after an upgrade.
What it does: 9,000 particles by default spring between a sphere, your word and a torus knot. A click cycles the shapes, the pointer pushes particles away, and the colour runs from colorA to colorB. It pauses off screen and in a hidden tab, and with Reduce Motion on it draws each shape still.
It isn't an R3F component and can't go inside <Canvas>. If you keep an R3F scene too, put Particle Morph in its own box next to it. Our R3F particles guide ran the two side by side in headless Chromium on October 25, 2026.
It paints its own black background, so give it a dark section.

components/morph-hero.tsx

"use client";
import dynamic from "next/dynamic";

// Particle Morph is plain three.js: it makes its own renderer in a div,
// so it needs no @react-three/fiber version at all.
const ParticleMorph = dynamic(() => import("@/components/ParticleMorph"), {
  ssr: false,
  loading: () => <div className="h-full w-full bg-black" />,
});

export function MorphHero() {
  return (
    <section className="relative h-[70vh] overflow-hidden bg-black">
      <ParticleMorph word="ACME" count={7000} className="absolute inset-0" />
    </section>
  );
}

What this page doesn't cover

React Native and Expo. The version pairs are the same, but we didn't check the native packages.
Upgrading @react-three/postprocessing, rapier, xr or other pmndrs packages. Check their peer ranges yourself.
A browser run of the snippets. They were type-checked with TypeScript 5.9.3 against fiber 9.8.2, drei 10.7.9, three 0.186.1 and next 15.5.28; we didn't run them in a browser or a Next.js build.
Particle Morph is not a fix for R3F. If your app is built on R3F scenes, upgrade fiber and drei; Particle Morph only replaces a scene whose whole job is a particle hero.

Install

Copy from the zipPut react/src/components into src/, then npm i @react-three/fiber@9 @react-three/drei@10 three && npm i -D @types/three (Particle Morph alone: npm i three).
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

word: the word one shape spells
count: number of particles (9,000 by default)
colorA / colorB: gradient, left to right
font: canvas font used to sample the word
className: size it from the parent

How qodesign compares

qodesign vs React BitsReact Bits is best for: text animations, animated backgrounds and creative effects.
qodesign vs Aceternity UIAceternity UI is best for: teams building many marketing pages who want one big library.

All comparisons, with prices read on each library's own site.

Questions

What does "Cannot read properties of undefined (reading 'ReactCurrentOwner')" mean in React Three Fiber?

@react-three/fiber 8 is running on React 19. Fiber 8's reconciler looks for React 18's internals, and React 19 doesn't have them. Upgrade to fiber 9.

Which React Three Fiber version works with React 19?

Fiber 9. The latest, 9.8.2, lists react ">=19 <19.4" as its peer range (npm, October 26, 2026).

Do I need to upgrade drei too?

Yes. drei 9 asks for fiber 8 and React 18. drei 10 asks for fiber 9 and React 19.

Will --legacy-peer-deps fix it?

No. It only lets npm install fiber 8 next to React 19, which is exactly the pair that fails with this error.

Where did MeshProps go?

Fiber 9 removed it. Use ThreeElements["mesh"] from @react-three/fiber.

Does Next.js 15 work with React Three Fiber?

Yes, with fiber 9 and React 19. Next.js 15 needs React 19, so fiber 8 doesn't fit a new Next.js 15 app.

Does Particle Morph need React Three Fiber?

No. It's plain three.js with its own renderer, so it has no fiber version to match.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.