pmndrs
Uncaught Error : Cannot find module error (with NextJS 13)
- 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 <Pathtracer> 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)
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
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.
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
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 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.jsHey, 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