React-Three-Fiber Canvas component causing 'Module parse failed: setter should have exactly one param' error in Next.js app: Solutions?

Canvas component in react-three-fiber not working in my next app.

Im beginner to react-three-fiber and next with app directory, and when i use Canvas component i get this 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;

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

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

my next.config.js:

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

module.exports = nextConfig;

I came across this issue recently. It is related to NextJS's transpiler. I was working on next@13.2.4. Updated to the latest version i.e next@13.4.4 and the issue was resolved.