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!

[bajedev]

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.

[bajedev]

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

[bajedev]

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

[bajedev]

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

[dannyhw]

I found my own solution eventually after digging through expo's babel preset

In order to make it work I had to add the babel plugin for transforming commonjs

import babel from 'vite-plugin-babel';
// ... stuff
babel({
   include: [/node_modules\/(react-native|@react-native)/],
  // ... stuff
  plugins: [
    [
      // this is a fix for reanimated not working in production
      '@babel/plugin-transform-modules-commonjs',
      {
        strict: false,
        strictMode: false, // prevent "use strict" injections
        allowTopLevelThis: true, // dont rewrite global `this` -> `undefined`
      },
    ],
    ...otherplugins
  ],
})

[ayuleul]

Based on @dannyhw's answer, the following solution works for us:

import babel from 'vite-plugin-babel';

export default defineConfig({
  plugins: [
    babel({
      babelConfig: {
        include: [/node_modules\/(react-native|@react-native)/],
        plugins: [
          [
            '@babel/plugin-transform-modules-commonjs',
            {
              strict: false,
              strictMode: false,
              allowTopLevelThis: true,
            },
          ],
        ],
      },
    }),
    ...otherPlugins,
  ],
  ...other,
});