search

pmndrs / react-three-offscreen

📺 Offscreen worker canvas for react-three-fiber
https://offscreen.pmnd.rs
MIT License
456 stars 19 forks source link

Not working with nextjs 14+ #15

Open bastiankistner opened 9 months ago

bastiankistner commented 9 months ago

I tried the offscreen canvas with nextjs 14 but it doesn't load the model. Tried it first in my own project and all I see is the fallback. Then checked out this repo and it works fine until I upgrade nextjs to the most recent version. The screen remains blank.

Does anyone happen to know what could be the reason?

MrUltimate commented 8 months ago

Hey @bastiankistner, did you ever figure out how to use this with NextJS?

zknicker commented 8 months ago

This is likely a symptom of Workers being broken in Next 14.1.0 and onwards.

Tracking issue for a fix: https://github.com/vercel/next.js/issues/60920

In the meantime, pin your Next version to 14.0.4 of earlier and it will probably fix the issue. I'm rolling my own solution for Worker + ThreeJS, not react-three-offscreen, so can't verify, but it should be the same thing more or less.

mofJon commented 5 months ago

Anything further on this issue?

It's apparently been fixed in next canary (https://github.com/vercel/next.js/pull/62051), but the issue in R3F/offscreen remains?

Fallback throws; Error: Element type is invalid. Received a promise that resolves to: [object Object]. Lazy element type must resolve to a class or function.

Disabling fallback seems to load the scene and the model, but doesn't render anything to screen.

mofJon commented 5 months ago

I get closer with setting reactStrictMode: false in next.config

ie... displays the scene on screen, but doesn't render materials.