Uncaught Error : Cannot find module error (with NextJS 13)

[heesu-chung]

• three : ^0.149.0
• @react-three/fiber : ^8.11.8
• @react-three/drei : ^9.56.25
• next : 13.2.3

Problem description:

Hello!

I'm now use this lib with @react-three/fiber, drei in nextjs.

When I use in NextJS 13, it gave me the not found module error (Cannot find module '.../node_modules/three/examples/jsm/postprocessing/Pass') which module actually exist.

Once I thought it is some kind of nextjs 'server side runtime issue' so that I tried 'use client' code to declare the component is not for server side but for client side component.

After I found out it doesn't work, I tried window undefined check. But it also doesn't work.

next/dynamic

const Pathtracer = dynamic(
  () => import("@react-three/gpu-pathtracer").then((mod) => mod.Pathtracer),
  {
    ssr: false,
  }
);

doesn't work.

Now I need some advise for handle this problem. Is this the problem of server side runtime issue with nextjs or lib compatibility issue? I want to know what the problem is and how I can solve the error.

Here's the jsx return code which from basic example.

Relevant code:

return (
    <>
      <Leva
        collapsed
        titleBar={{
          title: "Options",
        }}
      />
      <Canvas
        gl={{
          outputEncoding: sRGBEncoding,
          toneMapping: ACESFilmicToneMapping,
        }}
      >
        <Suspense fallback={null}>

            <Pathtracer
              samples={opts.Rendering_Samples}
              bounces={opts.Rendering_Bounces}
              resolutionFactor={opts.Rendering_Factor}
              tiles={opts.Rendering_Tiles}
              enabled={opts.Rendering_Enabled}
              backgroundIntensity={opts.Environment_Intensity}
              backgroundBlur={opts.Environment_Blur}
            >
              <Environment
                preset={"studio"}
                background={opts.Environment_Visible}
              />
              <Thing />
              <UI infoRef={infoRef} />
            </Pathtracer>

        </Suspense>
      </Canvas>
      <Stats />
    </>
  );

Here's the error msg I get. Error Msg:

GET http://localhost:3000/ 500 (Internal Server Error)
Uncaught Error: Cannot find module '.../node_modules/three/examples/jsm/postprocessing/Pass'
at createEsmNotFoundErr (node:internal/modules/cjs/loader:1016:15)
    at finalizeEsmResolution (node:internal/modules/cjs/loader:1009:15)
    at resolveExports (node:internal/modules/cjs/loader:529:14)
    at Module._findPath (node:internal/modules/cjs/loader:569:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:981:27)
    at mod._resolveFilename (file:///Users/Documents/GitHub/module_PathTrace/node_modules/next/dist/build/webpack/require-hook.js:23:32)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (file:///Users/Documents/GitHub/module_PathTrace/node_modules/@react-three/gpu-pathtracer/dist/react-three-gpu-pathtracer.cjs.dev.js:8:12)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (file:///Users/Documents/GitHub/module_PathTrace/node_modules/@react-three/gpu-pathtracer/dist/react-three-gpu-pathtracer.cjs.js:6:20)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at @react-three/gpu-pathtracer (file:///Users/Documents/GitHub/module_PathTrace/.next/server/pages/index.js:131:18)
    at __webpack_require__ (file:///Users/Documents/GitHub/module_PathTrace/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/canvas/etc/ui.tsx:7:85)
    at ./src/components/canvas/etc/ui.tsx (file:///Users/Documents/GitHub/module_PathTrace/.next/server/pages/index.js:76:1)
    at __webpack_require__ (file:///Users/Documents/GitHub/module_PathTrace/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/canvas/Scene.tsx:19:65)
    at __webpack_require__.a (file:///Users/Documents/GitHub/module_PathTrace/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///./src/components/canvas/Scene.tsx:1:21)
    at ./src/components/canvas/Scene.tsx (file:///Users/Documents/GitHub/module_PathTrace/.next/server/pages/index.js:32:1)
    at __webpack_require__ (file:///Users/Documents/GitHub/module_PathTrace/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/pages/index.tsx:12:82)
    at __webpack_require__.a (file:///Users/Documents/GitHub/module_PathTrace/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///./src/pages/index.tsx:1:21)
    at ./src/pages/index.tsx (file:///Users/Documents/GitHub/module_PathTrace/.next/server/pages/index.js:98:1)
    at __webpack_require__ (file:///Users/Documents/GitHub/module_PathTrace/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (file:///Users/Documents/GitHub/module_PathTrace/.next/server/pages/index.js:196:39)
    at <unknown> (file:///Users/Documents/GitHub/module_PathTrace/.next/server/pages/index.js:197:28)
    at Object.<anonymous> (file:///Users/Documents/GitHub/module_PathTrace/.next/server/pages/index.js:200:3)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.requirePage (file:///Users/Documents/GitHub/module_PathTrace/node_modules/next/dist/server/require.js:88:12)
    at <unknown> (file:///Users/Documents/GitHub/module_PathTrace/node_modules/next/dist/server/load-components.js:49:73)
    at async Object.loadComponentsImpl [as loadComponents] (file:///Users/Documents/GitHub/module_PathTrace/node_modules/next/dist/server/load-components.js:49:26)

[caticHarun]

I am experiencing the same error

[AmanKishore]

Experiencing the same error

[FarazzShaikh]

This is a common issue with Three.js' examples directory and NextJS. Can you please verify fix in v0.1.1

cc @heesu-chung @caticHarun @AmanKishore

[caticHarun]

New error

Error: require() of ES Module ...\node_modules\three\examples\jsm\postprocessing\Pass.js from ...\node_modules\three-gpu-pathtracer\build\index.umd.cjs not supported. Instead change the require of Pass.js in ...\node_modules\three-gpu-pathtracer\build\index.umd.cjs to a dynamic import() which is available in all CommonJS modules.

[dongho-shin]

I have same issues using path-tracer with next.js but I fixed Check this issue https://github.com/gkjohnson/three-gpu-pathtracer/issues/358

I hope it would help cc. @heesu-chung @caticHarun @AmanKishore

solution : change three-gpu-pathtracer's package.json

"main" : build/index.umd.cjs => build/index.module.js

[NickMundel]

I have same issues using path-tracer with next.js but I fixed Check this issue gkjohnson/three-gpu-pathtracer#358

I hope it would help cc. @heesu-chung @caticHarun @AmanKishore

solution : change three-gpu-pathtracer's package.json

"main" : build/index.umd.cjs => build/index.module.js

Hey, how do you change the package.json, for me the change doesnt seem to apply. Thanks in advance!

[dongho-shin]

I have same issues using path-tracer with next.js but I fixed Check this issue gkjohnson/three-gpu-pathtracer#358 I hope it would help cc. @heesu-chung @caticHarun @AmanKishore solution : change three-gpu-pathtracer's package.json

"main" : build/index.umd.cjs => build/index.module.js

Hey, how do you change the package.json, for me the change doesnt seem to apply. Thanks in advance!

I made a forked packages and then connect add git repo into my main project's package.json