CanvasOffscreen uses fallback with Vite
davcri opened this issue · comments
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: 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.
this is the workaround :( it's very bad