pmndrs
CanvasOffscreen uses fallback with Vite
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.
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.
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.
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: https://github.com/vitejs/vite/issues/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.
this is the workaround :( it's very bad
https://github.com/pmndrs/react-three-offscreen#vite
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.
