Vite example

[tomhendra]

Our project involves a universal Expo app and accompanying Vite Web app which is used for admin.
We have a monorepo setup where we want to share components between apps.
We are struggling to get Reanimated working with Vite. Does anyone have a working example please?

Ideally we don't want to use Webpack as the example: https://github.com/software-mansion/react-native-reanimated/tree/main/WebExample since we are more familiar with Vite.

This is where we currently are: https://stackblitz.com/edit/vitejs-vite-zlodww?file=vite.config.ts

Any guidance would be very much appreciated!

[by-theo]

You don't seem to have the @babel/core dependency

[tomhendra]

Thanks for your input, but adding the @babel/core dependency doesn't seem to solve the problem.

[by-theo]

Screen.Recording.2024-06-20.at.06.59.10.mov

Here's what happens after I add babel core

• At first nothing changes
• When I remove width from the styles then put it back everything starts to work even if I make changes to the animation

[by-theo]

You can also simplify the vite config by using https://github.com/Bram-dc/vite-plugin-react-native-web

[NovaBG03]

When using react-native-reanimated on the web with Strict Mode enabled, the issue arises because react-native-reanimated's current version isn't fully compatible with React's Strict Mode on web platforms. You can disable the Strict Mode and it will work.

Here is more information:
#6264

[NovaBG03]

Screen.Recording.2024-09-11.at.19.38.32.mov

[by-theo]

Awesome

[dannyhw]

Hey currently also trying to setup vite with reanimated and the problem I get which also reproduces in the stackblitz example is that on the built version I get this error:

index-D4qkjY-g.js:53 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at dl (index-D4qkjY-g.js:53:6365)
    at index-D4qkjY-g.js:53:48960
    at Array.forEach (<anonymous>)
    at Dc (index-D4qkjY-g.js:53:48934)
    at Object.a [as worklet] (index-D4qkjY-g.js:53:51069)
    at o (index-D4qkjY-g.js:53:14190)

[dannyhw]

Created a related issue here since I haven't been able to get the build working
#6775