Npm run build problem

Questions
1

index.tsx (1.5 KB)
SceneInit.js (6.5 KB)

Hi , I have a two file as i attached , I am a basic programer , when i run npm run dev in my terminal i see the error as below :

can anyone please help me
thanks in advanced

info - Linting and checking validity of types
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
[ ] info - Generating static pages (0/4)TypeError: Class constructor SceneInit cannot be invoked without ‘new’

Error occurred prerendering page “/lib/SceneInit”. Read more: prerender-error | Next.js
TypeError: Class constructor SceneInit cannot be invoked without ‘new’

Build error occurred
Error: Export encountered errors on following paths:
/lib/SceneInit

2

how old is your node? “class” should be fairly common. it looks like some people experience that with ancient node versions Typescript: `TypeError: Class constructor cannot be invoked without 'new'` · Issue #8973 · vercel/next.js · GitHub

otherwise since you use r3f anyway none of that is needed, the contents of sceneinit boil down to this:

import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'

export default function App() {
  return (
    <Canvas shadows camera={{ fov: 45 }}>
     <ambientLight intensity={0.1} />
     <directionalLight position={[0, 32, 64]} castShadow />
     <OrbitControls
       target={[0,1,0]}
       minDistance={10}
       maxDistance={20}
       minPolarAngle={0.2}
       maxPolarAngle={Math.PI / 2.1}
       enablePan={false} />
    </Canvas>
  )
}

since this is next, we have a nextjx starter/template GitHub - pmndrs/react-three-next: React Three Fiber, Nextjs, Tailwind and Styled-components starter this fixes some common woes, like keeping the canvas alive between route changes and responding to routes directly inside your scene graph.

4

please check my update SceneInit.js file . thanks for your help in advanced