In Nextjs 13+ modular build fails, modules not found...

[Cybermage83]

• three version: 150
• @react-three/fiber version:8.11.5
• @react-three/drei version: 9.56.27
• node version:18
• npm (or yarn) version: 8+

Problem description:

Any attempt to use drei components in Next.js 13+ build fail to find modules in variety of them

Result in Module not found* possible client/server build configuration, shared packages that are not meant to be mixed, like say fs/path, buffer or whatever it maybe

If not used and only fiber is used, no problem build goes through, Drei libarary should work also, but it does not - odd behavior

Relevant code:

This will work, you do the same with Box component, it will fail to build.

<mesh>
            <boxGeometry args={[1, 1, 1]}>
              <meshBasicMaterial color={0xffffff} />
            </boxGeometry>
          </mesh>

Suggested solution:

[trebeljahr]

I think I might be running into the same/a similar issue... still working on a minimal repro, but currently, I get this error:

it happens when trying to use anything from the @react-three/drei package and I am at my wit's end as to why this might happen. The next.js setup I use is quite involved, however, r3f on its own doesn't break things, the above error only happens when trying to include anything from drei.

[yalsayid]

Hi @trebeljahr, I've been running into the same problem you described here with the chevrotain package with Next.js. I noticed there hasn't been any movement on this issue for a couple of months and was wondering if you've found a workaround or solution in the meantime? Any insights you might have would be greatly appreciated.

For some context, my current setup is a monorepo using Turborepo, and there's a package in my project that employs "three," "react-three," and "react-three-drei". The issue arises when I attempt to transpile this package into Next.js. Interestingly, when I first bundle the package with Vite library mode, I don't encounter this problem. This leads me to suspect that the issue might reside with the Chevrotain package, specifically in its inability to be transpiled correctly by Next.js.

[rvanlaarhoven]

I noticed this only seems to happen when using the app directory. Not ideal, but as a workaround you could add it to a page in the pages directory.

[github-actions[bot]]

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!