pmndrs / react-three-fiber

🇨🇭 A React renderer for Three.js
https://docs.pmnd.rs/react-three-fiber
MIT License
27.62k stars 1.6k forks source link

Rotated line is not rendering in Next.js #3359

Closed fermmm closed 2 months ago

fermmm commented 2 months ago

I'm not sure if this is related with Next.js, react-three-fiber or drei so I'm reporting this here just in case

In Next.js when the Line component of drei has the rotation prop set and also is wrapped in another component it won't render. Renders when running "npm run dev" and not when running "npn run build" and then "npm start"

Here there is a project I made so you can test yourself: project.zip

This is what you see when running "npm run dev":

Captura de pantalla 2024-09-19 a la(s) 5 28 58 p  m

This is what you see when running "npm run build" and "npm start":

start

Package versions:

    "@react-three/drei": "^9.112.0",
    "@react-three/fiber": "^8.17.7",
    "next": "14.2.12",
    "react": "^18",
    "react-dom": "^18",
    "three": "^0.168.0"

The code to reproduce the issue is very simple:

import dynamic from "next/dynamic";

const BugReport = dynamic(() => import("./BugReport"), { ssr: false });

export default function Home() {
  return (
    <main className="bg-black">
      <BugReport />
    </main>
  );
}
"use client";
import { Canvas } from "@react-three/fiber";
import { Euler, MathUtils } from "three";
import LineWrapper from "./LineWrapper/LineWrapper";
import { Line } from "@react-three/drei";

export default function BugReport() {
  return (
    <div className="h-[700px] w-full">
      <Canvas camera={{ position: [0, 0, -120], fov: 25 }}>
        {/**
         * This always renders, no problems
         * */}
        <Line
          points={[
            [0, 0, 0],
            [20, 0, 0],
          ]}
          color={"white"}
          position={[0, -10, 0]}
          lineWidth={4}
          rotation={new Euler(0, 0, MathUtils.degToRad(65), "XYZ")}
        />

        {/**
         *
         * The following component does not render but is exactly the same code,
         * the only difference is that is wrapped.
         *
         * Renders when running on "npm run dev" but does not render when running
         *     npm run build
         *     npm start
         *
         * Unless rotation prop is commented (inside the component)
         *
         * */}
        <LineWrapper />
      </Canvas>
    </div>
  );
}
"use client";
import { Euler, MathUtils } from "three/src/Three.js";
import { Line } from "@react-three/drei";

/**
 * This component is not rendered when running "npm run build" and then "npm start" but does render when using "npm run dev"
 */
export default function LineWrapper() {
  return (
    <Line
      points={[
        [0, 0, 0],
        [20, 0, 0],
      ]}
      color={"red"}
      position={[0, -5, 0]}
      lineWidth={4}
      rotation={new Euler(0, 0, MathUtils.degToRad(65))} // Commenting this line fixes the issue but I cannot use rotation
    />
  );
}

Steps to reproduce:

  1. Create a next.js project or download the one I linked
  2. Paste the code below or use the one I linked
  3. run npm install
  4. run npm run dev open the browser on http://localhost:3000/ and see that both lines appear
  5. Now run npm run build and npm start and notice only one line appears
fermmm commented 2 months ago

I found the issue, Next.js does not show any warning so it was hard to find because of that. The line with the problem: import { Euler, MathUtils } from "three/src/Three.js";