I created a NextJS typescript project using react 18 and I want to integrate a React Three Fiber 3D feature into it. But I keep getting
Error: Cannot read properties of undefined (reading 'ReactCurrentOwner')
I also cant upgrade to @react-three/fiber@alpha because I am on react 18 and apparently that needs react 19. Is there anyway to integrate the two together?
The code that is causing the error Overview.tsx
"use client";
import { DateRangePicker } from "@/components/ui/date-range-picker";
import { MAX_DATE_RANGE_DAYS } from "@/lib/constants";
import { UserSettings } from "@prisma/client";
import { differenceInDays, endOfMonth, startOfMonth } from "date-fns";
import React, { useState } from "react";
import { toast } from "sonner";
import StatsCards from "./StatsCards";
import CategoriesStats from "./CategoriesStats";
// import GameScene from "../../../components/GameScene";
import dynamic from "next/dynamic"; // <-- Import dynamic
const GameScene = dynamic(() => import("../../../components/GameScene"), {
ssr: false,
});
function Overview({ userSettings }: { userSettings: UserSettings }) {
const [dateRange, setDateRange] = useState<{ from: Date; to: Date }>({
from: startOfMonth(new Date()),
to: endOfMonth(new Date()),
});
return (
<>
<div className=" w-5/6 ">
<div className="w-full px-4 flex flex-wrap items-end justify-between gap-2 py-6">
<StatsCards
userSettings={userSettings}
from={dateRange.from}
to={dateRange.to}
/>
<div className="w-full h-150 bg-card rounded-2xl flex justify-center items-center">
<h1>Game here</h1>
<GameScene />
</div>
<h2 className="text-3xl font-bold flex flex-grow">Overview</h2>
<div className="flex flex-grow items-center gap-3 justify-end ">
<DateRangePicker
initialDateFrom={dateRange.from}
initialDateTo={dateRange.to}
showCompare={false}
onUpdate={(values) => {
const { from, to } = values.range;
if (!from || !to) return;
if (differenceInDays(to, from) > MAX_DATE_RANGE_DAYS) {
toast.error(
`The selected date range is too big. Max allowed range is ${MAX_DATE_RANGE_DAYS}`
);
return;
}
setDateRange({ from, to });
}}
/>
</div>
</div>
<div className="w-full px-4 flex flex-wrap items-end justify-between gap-2 py-6 ">
<CategoriesStats
userSettings={userSettings}
from={dateRange.from}
to={dateRange.to}
/>
</div>
</div>
</>
);
}
export default Overview;
The react 3 fiber jsx component im trying to put in the overview page
GameScene.jsx
"use client";
import React, { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import * as THREE from "three"; // Type imports
function Box() {
const ref = useRef < THREE.Mesh > null;
useFrame(() => {
if (ref.current) {
ref.current.rotation.x += 0.01;
}
});
return (
<mesh ref={ref}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color="orange" />
</mesh>
);
}
function GameScene() {
return (
<Canvas>
<ambientLight intensity={0.5} />
<pointLight position={[10, 10, 10]} />
<Box />
</Canvas>
);
}
export default GameScene;
What I’ve tried:
- changing my next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
transpilePackages: ["three"],
};
export default nextConfig;
- changing my tsconfig.json
{
"compilerOptions": {
"typeRoots": ["./node_modules/@types", "./src/types"],
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
"next-env.d.ts",
"src/types/**/*.d.ts",
"components/Scene.jsx"
],
"exclude": ["node_modules"]
}
Error that i am getting
