Skip to content

[Bug]: @storybook/react-native-web not working with react-native-reanimated #31637

Open
@xlecunff-pass

Description

@xlecunff-pass

Describe the bug

The error encountered when trying to build with @storybook/react-native-web-vite is:

=> Failed to build the preview                                                                          12:22:28
[commonjs--resolver] ./node_modules/react-native-reanimated/lib/module/index.web.js: Export namespace should be first transformed by @babel/plugin-transform-export-namespace-from.
  2 |
  3 | export * from './reanimated2';
> 4 | export * as default from './Animated'; // If this line fails, you probably forgot some installation steps. Check out the installation guide here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started#installation 1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details) 2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache
    |        ^^^^^^^^^^^^

@storybook/react-native-web-vite wasn't working because of a babel configuration that couldn't be modified from our project's storybook configuration.

The problematic line is configFile: false

babe({
...pluginBabelOptions,
include: pluginBabelOptions.include || [
/node_modules\/(react-native|@react-native|expo|@expo)/,
], Exclude: pluginBabelOptions.exclude, babelConfig: {
...pluginBabelOptions.babelConfig, babelrc: false,
Config File: false, presets: [
[

The config only works if configFile is set to true.

Since ...pluginBabelOptions.babelConfig is the first element of the object, it is necessarily overwritten, so this setting cannot be overridden by pluginBabelOptions like the specific storybook docs

The only way to make @storybook/react-native-web-vite work is to patch the library.

A PR may be open to make ...pluginBabelOptions.babelConfig the last element of the object. whose key is babelConfig

Patching@storybook/react-native-web-vite is our only solution to make work our Storybook project.

A PR can be opened by me for making...pluginBabelOptions.babelConfig the last element of babelConfig

Reproduction link

Reproduction steps

No response

System

react-native@73
vite@5
react-native-web@19
storybook@8

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions