Next.js App目录中使用React-Three-Fiber Canvas组件触发‘Module parse failed: setter should have exactly one param’错误的解决方案求助

大家好，我是刚接触React-Three-Fiber和Next.js App目录的新手，最近在使用Canvas组件的时候遇到了一个编译错误，实在摸不着头绪，来求助各位大佬！

当我尝试在Next.js的App目录中使用@react-three/fiber的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;

以下是我的相关代码和配置：

1. page.tsx 文件（已添加"use client"指令） #

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

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

3. next.config.js 配置 #

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

module.exports = nextConfig;

我已经尝试了在next.config.js中配置transpilePackages来转译three模块，但还是出现这个错误，有没有大佬知道怎么解决这个问题呀？

备注：内容来源于stack exchange，提问作者EL MAHDI BOUZKOURA