帆布组件在React三纤维不工作在我的下一个应用程序。
我初学react-three-fiber和next与应用程序目录，当我使用Canvas组件时，我得到这个错误：

./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;

我的页面.tsx文件：

"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>
  );
}

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>
  );
}

我的下一个.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["three"],
};

module.exports = nextConfig;