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":
This is what you see when running "npm run build" and "npm start":
"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:
Create a next.js project or download the one I linked
Paste the code below or use the one I linked
run npm install
run npm run dev open the browser on http://localhost:3000/ and see that both lines appear
Now run npm run build and npm start and notice only one line appears
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";
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":
This is what you see when running "npm run build" and "npm start":
Package versions:
The code to reproduce the issue is very simple:
Steps to reproduce:
npm install
npm run dev
open the browser on http://localhost:3000/ and see that both lines appearnpm run build
andnpm start
and notice only one line appears