Not working with nextjs 14+

[bastiankistner]

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]

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

[zknicker]

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

Tracking issue for a fix: vercel/next.js#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]

Anything further on this issue?

It's apparently been fixed in next canary (vercel/next.js#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]

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

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