Stories with play functions are excluded in production when using addon-react-native-web

[penx]

Describe the bug

When @storybook/addon-react-native-web is used, yarn build-storybook will not show stories that contain a story with a .play function/interaction (using @storybook/addon-interactions).

There are no errors during build, but an error does appear in the console when running the built storybook:

Unexpected error while loading ./stories/Page.stories.tsx: exports is not defined
 ReferenceError: exports is not defined
    at ./src/stories/Page.stories.tsx (http://localhost:6006/main.52cda89e.iframe.bundle.js:1:11360)

These stories are visible when you run yarn storybook but not shown when you run yarn build-storybook.

Note, this is not restricted to interactions, it seems the same bug exists for any async function added as a property to the story,

i.e.

// no issue
MyStory.anything = () => {};

// causes story to be excluded when addon-react-native-web is used
MyStory.anything = async () => {};

To Reproduce

https://github.com/penx/storybook-bug-play-build

• clone repo
• yarn && yarn build-storybook && npx http-server storybook-static --port 6006

then:

• note that the "Page" stories are no longer visible (see screenshot), as one of them has a play function
• note that if you yarn storybook, these stories are still visible
• note that if you remove the play function from the Page stories, they are visible again
• note that building with yarn build-storybook --loglevel silly produces no errors or warnings other than what is visible in the repro-base

Additional context

Screenshot of repro storybook with "Pages" missing:

Possibly related:

• Uncaught ReferenceError: exports is not defined in React Native Web in Windows 10 necolas/react-native-web#2184
• Error: exports is not defined #3346

[penx]

After further investigation, I think this is due to @storybook/addon-react-native-web overriding the babel config in a way that is not compatible with async functions

https://github.com/storybookjs/addon-react-native-web/blob/main/src/webpack.ts

I have raised storybookjs/addon-react-native-web#42 as I now think that's where the issue is (or one of its dependencies)

[penx]

Closing as I was able to resolve the issue by removing our dependency on @storybook/addon-react-native-web by configuring babel via customize-cra, react-app-rewired and config-overrides.js.

I have kept the upstream bug open.