RSC: ThreeJS error when importing a client component
Answered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
Getting this:
When I use a React-Three-Fiber client component through NextJS's RSC (13.4.8). There's a
- error node_modules/three/build/three.module.js (41412:0) @ eval
- error unhandledRejection: Error [ReferenceError]: ProgressEvent is not defined
at eval (webpack-internal:///(sc_client)/./node_modules/three/build/three.module.js:41824:25) {
digest: undefined
}When I use a React-Three-Fiber client component through NextJS's RSC (13.4.8). There's a
serverComponentsExternalPackages but is there a config for excluding client libraries from Next?Answered by Rafael Almeida
try to import this component with
ssr: false so Next won't try to pre-render it: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr4 Replies
try to import this component with
ssr: false so Next won't try to pre-render it: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssrAnswer
@Rafael Almeida try to import this component with `ssr: false` so Next won't try to pre-render it: <https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr>
Asiatic LionOP
Laaaaaaate reply... Works! Thanks!
@Rafael Almeida try to import this component with `ssr: false` so Next won't try to pre-render it: <https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr>
Sphecid wasp
Trying to import client component from server component this way in v15, it says ssr false is not allowed in server components, need to move it to client component.
Is this answer outdated?
Is this answer outdated?
loading the component with
ssr: false is a client-side operation so it makes sense it doesn't work with server components. the docs are correct with the info to move it to a client component then importing it from there. the alternative solution, which involves using the useEffect hook would also require a client component