[Bug]: react-native-web-vite throws reanimated useAnimatedStyle used without dependency array error

[NiGhTTraX]

Describe the bug

I am building an app with heroui-native and Storybook for React Native Web. The app works fine on web when Expo bundles it with Metro, but when bundled with SB RNW I get the following error from reanimated:

[Reanimated] useAnimatedStyle was used without a dependency array or Babel plugin. Please explicitly pass a dependency array, or enable the Babel plugin.
For more, see the docs: https://docs.swmansion.com/react-native-reanimated/docs/guides/web-support#web-without-the-babel-plugin.

On device Storybook with React Native works just fine! Expo on web works fine. It's only SB with RNW that fails with this error.

Reproduction link

https://github.com/NiGhTTraX/sb-native-reanimated

Reproduction steps

1. Go to the above link.
2. Run pnpm install
3. Run pnpm run storybook
4. Load the first Button story

Expected

The story loads and shows a simple button.

Actual

[Reanimated] `useAnimatedStyle` was used without a dependency array or Babel plugin. Please explicitly pass a dependency array, or enable the Babel plugin.

System

System:
│  OS: macOS 26.4.1
│  CPU: (8) arm64 Apple M1 Pro
│  Shell: 5.9 - /bin/zsh
│  Binaries:
│  Node: 24.13.1
│  pnpm: 10.33.1 <----- active
│  Browsers:
│  Safari: 26.4
│  npmPackages:
│  @storybook/addon-ondevice-actions: ~10.4.2 => 10.4.2
│  @storybook/addon-ondevice-controls: ~10.4.2 => 10.4.2
│  @storybook/react-native: ~10.4.2 => 10.4.2
│  @storybook/react-native-web-vite: ~10.3.6 => 10.3.6
│  storybook: ~10.3.6 => 10.3.6

Additional context

I've already tried adding plugins: ["react-native-worklets/plugin"] in pluginReactOptions, as recommended in the docs, and it doesn't fix the issue.

[jshaofa-ui]

🔧 Solution Proposal: react-native-web-vite Reanimated useAnimatedStyle Error

Root Cause

Storybook's react-native-web-vite builder uses Vite as its bundler, which uses esbuild for JavaScript/TypeScript transformation by default — not Babel. React Native Reanimated's react-native-worklets-plugin is a Babel plugin that transforms animated style declarations at build time. Since Vite doesn't run Babel transforms by default, the worklets plugin is never applied, causing Reanimated to throw the "useAnimatedStyle was used without a dependency array or Babel plugin" error.

The user's attempted fix (plugins: ["react-native-worklets/plugin"] in pluginReactOptions) doesn't work because pluginReactOptions configures @vitejs/plugin-react, not the worklets transformation pipeline.

User-Level Workaround

Add a custom Vite plugin to apply the worklets transformation via Babel:

// .storybook/main.ts
import babel from 'vite-plugin-babel';

export default {
  addons: [
    // ... your addons
  ],
  framework: {
    name: '@storybook/react-native-web-vite',
    options: {},
  },
  viteFinal(config) {
    config.plugins = config.plugins || [];
    config.plugins.push(
      babel({
        filter: /\.[jt]sx?$/,
        babelConfig: {
          presets: ['babel-preset-expo'],
          plugins: ['react-native-reanimated/plugin'],
        },
      })
    );
    return config;
  },
};

Library-Level Fix

The react-native-web-vite builder should automatically detect Reanimated and configure the worklets plugin:

// In @storybook/react-native-web-vite builder
async function configureReanimated(config: UserConfig) {
  const reanimatedPath = findPackageUp('react-native-reanimated', process.cwd());
  if (reanimatedPath) {
    const { default: babel } = await import('vite-plugin-babel');
    config.plugins = config.plugins || [];
    config.plugins.push(
      babel({
        filter: /\.[jt]sx?$/,
        babelConfig: {
          plugins: [['react-native-reanimated/plugin', { globals: ['__worklet', '__frame'] }]],
        },
      })
    );
  }
  return config;
}

Files to Modify

• code/lib/react-native-web-vite/src/index.ts — Add Reanimated auto-detection

Impact

• Fixes Reanimated compatibility for all react-native-web-vite users
• No breaking changes — auto-detection is additive
• Users with existing workarounds won't be affected

[NiGhTTraX]

I did some more testing with the modulesToTranspile option: I created a simple node_modules/test.tsx file that uses useAnimatedStyle and created a story that imports it. Out of the box the story fails with the same reanimated story. Adding modulesToTranspile: ['test'] fixes the error, confirming the need to whitelist dependencies.

However, adding modulesToTranspile: ['heroui-native'] does not work for that particular library. I'm not sure if the matching isn't working correctly, or if the plugin can't detect the reanimated calls in it.

[NiGhTTraX]

It seems like react-native-reanimated/plugin (or the worklets variant) is not running over heroui-native, even if I include it in modulesToTranspile (tested by adding a simple plugin that logs the filenames before the reanimated one). Adding heroui-native to optimizeDeps.exclude in the vite config with viteFinal makes the babel plugin run over it, but throws ENOENT errors:

■  Vite Pre-transform error:
│  ./node_modules/heroui-native/lib/module/components/slider/slider.js?v=e99218a1:
│  [Worklets] Babel plugin exception: ENOENT: no such file or directory, open
│  './node_modules/heroui-native/lib/module/components/slider/slider.js?v=e99218a1'
│  Plugin: vite:react-babel
│  File:
│  ./node_modules/heroui-native/lib/module/components/slider/slider.js?v=e99218a1

Seems like the plugin doesn't like the ?v=e99218a1 hashes that are added to every file.

I would appreciate some guidance on how to continue here 😅