ReactCurrentOwner

[SenneChristiaens]

Summary

I installed three and fiber. When I create a Canvas I immediately get this error:

This is my package.json:

{
  "name": "senne-christiaens-portfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "slicemachine": "start-slicemachine"
  },
  "dependencies": {
    "@gsap/react": "^2.1.1",
    "@prismicio/client": "^7.12.0",
    "@prismicio/next": "^1.7.1",
    "@prismicio/react": "^2.9.1",
    "@types/three": "^0.170.0",
    "clsx": "^2.1.1",
    "gsap": "^3.12.5",
    "next": "15.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@react-three/fiber": "^8.15.12",
    "@react-three/drei": "^9.92.1",
    "three": "^0.159.0"
  },
  "devDependencies": {
    "@slicemachine/adapter-next": "^0.3.58",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.4.20",
    "eslint": "^8",
    "eslint-config-next": "15.0.3",
    "postcss": "^8",
    "slice-machine-ui": "^2.10.4",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

This is my Canvas:

"use client";

import React from "react";
// import * as THREE from "three";
import { Canvas } from "@react-three/fiber";
import { ContactShadows, Float, Environment } from "@react-three/drei";
import { Suspense, useRef, useEffect, useState } from "react";
// import { gsap } from "gsap";
// import { useGSAP } from "@gsap/react";

export function Shapes() {
  return (
    <div className="row-span-1 row-start-1 -mt-9 aspect-square  md:col-span-1 md:col-start-2 md:mt-0">
      <Canvas
        className="z-0"
        shadows
        gl={{ antialias: false }}
        dpr={[1, 1.5]}
        camera={{ position: [0, 0, 25], fov: 30, near: 1, far: 40 }}
      >
        <Suspense fallback={null}>
          <ContactShadows
            position={[0, -3.5, 0]}
            opacity={0.65}
            scale={40}
            blur={1}
            far={9}
          />
          <Environment preset="studio" />
        </Suspense>
      </Canvas>
    </div>
  );
}

Does anyone have a solution to my problem?

Additional information

No response

Example

No response

[icyJoseph]

For now, you need to use,@react-three/fiber@alpha, as pointed out here:

• React 19 support - "Cannot read properties of undefined (reading 'ReactCurrentOwner')" pmndrs/react-three-fiber#3398 (comment):

And further developed here, pmndrs/react-three-fiber#3222

[icyJoseph]

React 19 is stable and out now! Could you give it a go?

[SenneChristiaens]

So upgrade back to the rc version? And try with the alpha version?

[icyJoseph]

Try with react-fiber beta or alpha, and install React 19.0.0, released some minutes ago

[icyJoseph]

Ok, I got it to install without dependency conflicts. Needed to do some overrides, and I was able to install @react-three/fiber@beta:

  "overrides": {
    "@gsap/react": {
      "react": "19.0.0"
    },
    "@prismicio/next": {
      "react": "19.0.0",
      "next": "15.0.3"
    },
    "next": {
      "react": "19.0.0",
      "react-dom": "19.0.0"
    },
    "@react-three/drei": {
      "@react-three/fiber": "9.0.0-beta.1"
    }
  }

My suggestion, wait a bit for Next, and others to add React 19 to their peerDependencies, about an hour ago Next.js updated it, and it is most likely coming out on the next release. Same with other packages that depended on specific RC versions.

You can see a running version here, https://stackblitz.com/edit/github-ex91vh?file=package.json

[SenneChristiaens]

Thanks Joseph, Hero!!

[icyJoseph]

If it's all working fine, somewhat, please don't forget to mark as answered 😄