Search code examples
javascriptthree.jsnext.jsreact-three-fiber

ThreeJS + NextJS: class constructors must be invoked with 'new'

I am trying to render a simple scene inside a nextJS route inside "lab2".

I keep recieving this error:

class constructors must be invoked with 'new'
Call Stack
renderWithHooks
node_modules\react-reconciler\cjs\react-reconciler.development.js (7363:0)
mountIndeterminateComponent
node_modules\react-reconciler\cjs\react-reconciler.development.js (12327:0)
beginWork
node_modules\react-reconciler\cjs\react-reconciler.development.js (13831:0)
callCallback
node_modules\react-reconciler\cjs\react-reconciler.development.js (14219:0)
invokeGuardedCallbackDev
node_modules\react-reconciler\cjs\react-reconciler.development.js (14268:0)
invokeGuardedCallback
node_modules\react-reconciler\cjs\react-reconciler.development.js (14329:0)
beginWork$1
node_modules\react-reconciler\cjs\react-reconciler.development.js (19537:0)
performUnitOfWork
node_modules\react-reconciler\cjs\react-reconciler.development.js (18686:0)
workLoopSync
node_modules\react-reconciler\cjs\react-reconciler.development.js (18597:0)
renderRootSync
node_modules\react-reconciler\cjs\react-reconciler.development.js (18565:0)
performConcurrentWorkOnRoot
node_modules\react-reconciler\cjs\react-reconciler.development.js (17836:0)
workLoop
node_modules\react-reconciler\node_modules\scheduler\cjs\scheduler.development.js (266:0)
flushWork
node_modules\react-reconciler\node_modules\scheduler\cjs\scheduler.development.js (239:0)
performWorkUntilDeadline
node_modules\react-reconciler\node_modules\scheduler\cjs\scheduler.development.js (533:0)
EventHandlerNonNull*
node_modules\react-reconciler\node_modules\scheduler\cjs\scheduler.development.js (571:0)
<unknown>
node_modules\react-reconciler\node_modules\scheduler\cjs\scheduler.development.js (633:3)
./node_modules/react-reconciler/node_modules/scheduler/cjs/scheduler.development.js
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/pages/lab2.js (148:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
<unknown>
node_modules\react-reconciler\node_modules\scheduler\index.js (6:2)
./node_modules/react-reconciler/node_modules/scheduler/index.js
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/pages/lab2.js (159:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
$$$reconciler
node_modules\react-reconciler\cjs\react-reconciler.development.js (19:24)
createRenderer
node_modules\@react-three\fiber\dist\index-4f1a8e2f.esm.js (1041:31)
<unknown>
node_modules\@react-three\fiber\dist\index-4f1a8e2f.esm.js (1628:2)
./node_modules/@react-three/fiber/dist/index-4f1a8e2f.esm.js
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/pages/lab2.js (18:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
<unknown>
webpack-internal:///./node_modules/@react-three/fiber/dist/react-three-fiber.esm.js (30:99)
./node_modules/@react-three/fiber/dist/react-three-fiber.esm.js
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/pages/lab2.js (29:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
<unknown>
webpack-internal:///./pages/lab2.js (4:95)
./pages/lab2.js
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/pages/lab2.js (93:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
<unknown>
node_modules\next\dist\build\webpack\loaders\next-client-pages-loader.js?absolutePagePath=C%3A%5CUsers%5Croot%5CDocuments%5CCS%20things%5CPhys_2%5Cphys2labs%5Cpages%5Clab2.js&page=%2Flab2! (5:15)
onEntrypoint/<
node_modules\next\dist\client\route-loader.js (235:50)
promise callback*onEntrypoint
node_modules\next\dist\client\route-loader.js (235:41)
register
node_modules\next\dist\client\index.js (268:58)
<unknown>
node_modules\next\dist\build\webpack\loaders\next-client-pages-loader.js?absolutePagePath=C%3A%5CUsers%5Croot%5CDocuments%5CCS%20things%5CPhys_2%5Cphys2labs%5Cpages%5Clab2.js&page=%2Flab2! (2:0)
./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=C%3A%5CUsers%5Croot%5CDocuments%5CCS%20things%5CPhys_2%5Cphys2labs%5Cpages%5Clab2.js&page=%2Flab2!
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/pages/lab2.js (71:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/webpack.js (37:33)
__webpack_exec__
/_next/static/chunks/pages/lab2.js (220:61)
<unknown>
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/pages/lab2.js (221:78)
__webpack_require__.O
/_next/static/chunks/webpack.js (86:23)
<unknown>
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/pages/lab2.js (222:56)
<unknown>
webpackJsonpCallback@http://localhost:3000/_next/static/chunks/webpack.js?ts=1656026286152 (1181:46)
<unknown>
/_next/static/chunks/pages/lab2.js (9:61)

I get three of these errors, and the console attributes these to within <BoxGeometry>, <MeshPhysicalMaterial>, and <ForwardRef(Canvas)> components.

Here is my Lab2.js route:

import { Canvas } from "@react-three/fiber";
import Floor from "../components/floor";


function Lab2() {
    return(
        <div className="w-screen h-screen">
            <Canvas
            shadows={true}
            className="bg-slate-500"
            camera={{
                position: [-6, 7, 7],
            }}>
                <Floor position={[0, -1, 0]} />
            </Canvas>
        </div>
    );
}

export default Lab2;

And my floor.js component:

import { BoxBufferGeometry, MeshPhysicalMaterial } from "three";

function Floor(props) {
    return (
        <mesh {...props} recieveShadow={true}>
            <BoxBufferGeometry args={[20,1,10]} />
            <MeshPhysicalMaterial color='white' />
        </mesh>
    );
}

export default Floor;

My dependencies and versions:

"dependencies": {
    "@react-three/fiber": "^8.0.27",
    "next": "12.1.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "three": "^0.141.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "eslint": "8.18.0",
    "eslint-config-next": "12.1.6",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.4"
  }

Any help would be greatly appreciated.

Solution

  • In React-Three-Fiber you don't need to import BoxBufferGeometry and MeshPhysicalMaterial from three if you want to just return them in the jsx component (just like you did not import mesh!), convert these to camel-case like so:

    function Floor(props) {
    return (
        <mesh {...props} recieveShadow={true}>
            <boxBufferGeometry args={[20,1,10]} />
            <meshPhysicalMaterial color='white' />
        </mesh>
    );
}

export default Floor;