The issue is clear: "Cannot read properties of undefined (reading 'S')" - this happens when THREE.js objects are being accessed during static page generation. The page is trying to render Canvas and THREE.js elements at build time, which fails. I need to wrap the 3D scenes with dynamic imports that disable SSR. Let me fix this:

I see the first issue - line 7 has export const nextDynamic = "force-dynamic" which is wrong. It should be export const dynamic = "force-dynamic". Also, THREE.js and Canvas are being imported at the top level, which causes them to run during static generation. Let me fix this:

Now I need to handle the THREE import since it's used in the code. Let me add it back but wrapped properly:

Fixed the deployment build error by:

1. Correcting export const nextDynamic to export const dynamic = "force-dynamic" to properly prevent static generation
2. Using Next.js dynamic imports with ssr: false for all THREE.js and Canvas components to prevent them from executing during server-side static generation
3. Making THREE import lazy so it only loads on the client side

This prevents THREE.js from trying to access properties during the build process, which was causing the "Cannot read properties of undefined" error.

I see the issue! Line 6 declares export const dynamic = "force-dynamic" but I'm also importing dynamic from "next/dynamic" on line 4, and then using it on lines 10+. The problem is the naming conflict. Let me fix this by renaming the import:

Fixed the naming conflict by renaming the import from "next/dynamic" to dynamicImport so it doesn't conflict with the export const dynamic = "force-dynamic" statement. I also removed the incorrect dynamic imports for hooks (useFrame, useThree) since hooks must be imported normally and can't be dynamically imported. The 3D components will still render client-side only with ssr: false.