Reanimated animations fail silently in production React + Vite web app deployed on Cloudflare Workers

[whistlecube]

Description

To preface, I'm not sure if this is an issue with Reanimated or Skia. I have a minimal repro linked below.

When using Skia, React and Vite, animations don't run in production on a CF Worker, but are fine in the vite dev server. No errors are thrown. I'm using code-splitting via 'WithSkiaWeb', and there appear to be no issues with the initialization or initial drawing using Skia. The animation is the example from the docs.

In Chrome devtools, the performance tab function call stacks indicates that, each frame, the 'tick' function appears to spawn 'renderInCanvas' on the dev server, but in production, it spawns 'requestAnimatedFunction'. Notably, the initial layout happens correctly, but subsequent frames don't cause any redraws. My interpretation is that Reanimated is not able to trigger a Skia redraw when it should, and instead falls back to 'requestAnimatedFrame'.

My vite.config.ts is taken from this comment on an issue in the Reanimated repo. I have minimally adapted it to get Skia working alongside reanimated.

If anyone has any experience getting Skia + Reanimated working with Vite, I would be very interested to see how you did it! Also, feel free to leave any feedback about my approach, as I'm new to working with these packages.

I also submitted this issue to the Reanimated repo

React Native Skia Version

2.2.4

React Native Version

0.81.0

Using New Architecture

• Enabled

Steps to Reproduce

1. Clone repo below
2. bun install
3. bun run preview

Or, from scratch:

1. bun create cloudflare my-react-app --framework=react
2. Install all necessary dependencies (see package.json of repro)
3. Modify vite.config.ts as per repro
4. bun run preview

Snack, Code Example, Screenshot, or Link to Repository

https://github.com/whistlecube/skia-reanimated-vite-worker-repro