WebGL client component only renders when running "npm run dev" and not with "npm start"

[fermmm]

Link to the code that reproduces this issue

https://github.com/fermmm/nextjs-bug-report

To Reproduce

1. Create a next.js project or clone the one I linked, I cannot create a canary project because it requires a version of react incompatible with the library that is part of the problem
2. Run npm install
3. Run npm run dev open the browser on http://localhost:3000/ and notice that 2 lines appear
4. Run npm run build and npm start notice only one line appears

For more info see the comments on the code.

Current vs. Expected behavior

Expected:

2 components should render when running npm run dev
2 components should render when running npm start (it should be the same)

Current:

2 components render when running npm run dev
Only 1 component renders when running npm start

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:14:30 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T6030
  Available memory (MB): 18432
  Available CPU cores: 11
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.12 // Latest available version is detected (14.2.12).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next build (local), next start (local)

Additional context

Description of the issue:
In Next.js when the Line component of drei library 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". This is clarified in the comments of the code provided.
If you comment the rotation prop or move the code outside the wrapper the issue is fixed.
Looks like Next.js brakes the code on transpilation or in another process related with building. It seems the rotation prop and wrapping in another component is related with it.

In the example provided I'm loading my component without server side rendering using lazy to discard any issue related with that but it does not make a difference. All browsers do the same.

Important:
I cannot reproduce the issue with the canary version because it requires a version of react incompatible with the libraries used.

I'm pasting here the code provided in the project link at the top, so you can see more easy what is all about:

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),  "XYZ")} // Commenting this line fixes the issue but I cannot use rotation
    />
  );
}

[ztanner]

hi @fermmm -- in LineWrapper your three dependencies are being imported from "three/src/Three.js"; whereas your main page component is importing from three.

Fixing the import seems to fix the problem for me.

[fermmm]

hi @fermmm -- in LineWrapper your three dependencies are being imported from "three/src/Three.js"; whereas your main page component is importing from three.

Fixing the import seems to fix the problem for me.

Thanks, I didn't notice because it was added wrong by the autocomplete, in part this is still an issue of Next.js, there should be an error message when you import from a path that is going to be unavailable after the build, it took me some time to find the issue because there are no warnings or errors in the console or anywhere, this is time wasted for both of us.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.