CanvasOffscreen uses fallback with Vite

[davcri]

First of all thanks @drcmda for this amazing package.

I tried integrating the example on a Vite based project and it seems like CanvasOffscreen always use fallback scene.
Using the CRA example provided in this repo works fine instead.

Minimal Vite example: https://stackblitz.com/edit/vitejs-vite-pujh5e?file=src/App.jsx
Tested on latest Chrome on a Macbook Pro M1.

[drcmda]

i tried using vite as well but couldn't make it work, it looks like it has trouble loading the worker. it's more like a vite problem, nothing that i think i can fix here, it's just a worker after all. but if you figure it out i would love to document what must be done to make it work.

[drcmda]

it looks like vite can't handle jsx in workers. if the <Scene /> is removed at least i can console.log in it to make sure the worker runs, but once any jsx is in there the worker doesn't execute.

[drcmda]

ok, started to see something if i rename to worker.jsx, and if i just render a mesh with a geometry. as soon as i import the scene component vite tries to inject styles to document, which doesn't exist in the worker. :-S

some more digging, it is this that causes it: vitejs/vite#1984 the plugin injects dom styles. i think previously it was possible to switch that off, see https://stackoverflow.com/questions/73815639/how-to-use-jsx-in-a-web-worker-with-vite but that option doesn't exist no more.

[drcmda]

this is the workaround :( it's very bad

https://github.com/pmndrs/react-three-offscreen#vite

[TobiasMelen]

Hello, I've fiddled with rendering r3f offscreen a while ago and in conjunction with this I made a patch plugin for Vites dev client to re-enable fast refresh in workers.
Just saw this project and updated the plugin for latest Vite, it seems to work okay-ish still: codesandbox

Plugin vite-plugin-react-worker

Any updates outside the canvas re-triggers the effect doing the canvas offscreen handover, which will fail. This results in the fallback being rendered instead. But for changes inside of the worker it seems to work.