Having issues with the Canvas component in react-three-fiber not functioning correctly in my next app.
I am new to react-three-fiber and Next.js, and when I try to use the Canvas component, I encounter the following error:
./node_modules/three/build/three.module.js
Module parse failed: setter should have exactly one param (1433:13)
| return this.source.data;
| }
> set image() {
| let value = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : null;
| this.source.data = value;
Here is my page.tsx file:
"use client";
import { Canvas } from "@react-three/fiber";
import Box from "@/components/Box";
export default function Home() {
return (
<Canvas>
<pointLight position={[10, 10, 10]} />
<Box />
</Canvas>
);
}
The content of Box.tsx:
import { useRef, useState } from "react";
import { useFrame, ThreeElements } from "@react-three/fiber";
export default function Box() {
const ref = useRef<ThreeElements["mesh"]>(null!);
const [hovered, hover] = useState(false);
const [clicked, click] = useState(false);
useFrame((state, delta) => (ref.current.rotation.x += delta));
return (
<mesh
ref={ref}
scale={clicked ? 1.5 : 1}
onClick={(event) => click(!clicked)}
onPointerOver={(event) => hover(true)}
onPointerOut={(event) => hover(false)}
>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? "hotpink" : "orange"} />
</mesh>
);
}
This is how my next.config.js looks like:
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages: ["three"],
};
module.exports = nextConfig;