Stories with async functions as properties throw "exports is not defined" in production

[penx]

Describe the bug

(original storybook issue here storybookjs/storybook#19290)

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 storybook#3346

[dannyhw]

@penx thanks for the detailed issue, I'm away right now but once I get back I'll look into this.

[dannyhw]

@penx sorry for the delay in responding, did you find any solution?

[penx]

No problem! I think we removed this addon and configured react-native-web manually

[dannyhw]

@penx could you share the config that worked? maybe there is something we could include in the package to resolve the issue.

[penx]

As far as I understand, we're just using @storybook/preset-create-react-app then adding a webpack alias from react-native to react-native-web in the webpackFinal export of .storybook/main.js

[dannyhw]

Closing this since I'm not sure how to reproduce and it seems like you've found a different solution. If you would like to reopen just let me know.