Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rotated line is not rendering in Next.js #3359

Closed
fermmm opened this issue Sep 19, 2024 · 1 comment
Closed

Rotated line is not rendering in Next.js #3359

fermmm opened this issue Sep 19, 2024 · 1 comment

Comments

@fermmm
Copy link

fermmm commented Sep 19, 2024

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 fermmm closed this as completed Sep 20, 2024
@fermmm
Copy link
Author

fermmm commented Sep 20, 2024

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";

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant