[Bug] Storybook hangs with add-on

kalynrobinson commented 1 year ago

Describe the bug

When adding @storybook/addon-react-native-web to the addons array, Storybook no longer successfully starts. It builds properly but then hangs at 69%.

Building Storybook and then serving the static files does not work.

Using the object form instead of string for adding the addon does not work.

Steps to reproduce the behavior

I added it to the addons array in main.js, then ran

yarn build-storybook     # this was successful
yarn storybook           # this hangs
yarn storybook -c ./storybook-static # this also hangs

My Storybook setup has no other customization than what comes out of npx storybook init

Expected behavior

Storybook should start up normally.

Screenshots and/or logs

info => Using default Webpack4 setup
10% building 1/1 modules 0 active(node:8824) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
10% building 8/16 modules 8 active .../@storybook/addon-interactions/preview.js
info => Using cached manager
69% building 961/963 modules 2 active ...k/preview.js-generated-config-entry.js^C

// main.js

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],

  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-react-native-web",
  ],

  "framework": "@storybook/react"
}

Storybook never continues past this point.

Environment

OS: MacOS
Node.js version: v18.7.0
NPM version: v8.15.0
Browser (if applicable): N/A
Browser version (if applicable): N/A
Device (if applicable): Web

Additional context

Add any other context about the problem here.

dannyhw commented 1 year ago

@kalynrobinson usually this happens because of an error somewhere with a missing import or something along those lines, can you send me a reproduction of this?

kalynrobinson commented 1 year ago

@dannyhw here's a stripped down version of what I'm working with --

https://github.com/kalynrobinson/storybook-react-native-web

If you clone the repo and do the following, the issue should occur:

yarn
cd packages/storybook
yarn storybook

dannyhw commented 1 year ago

@kalynrobinson you just need to install "metro-react-native-babel-preset" and it will work, just tested it. I'll add it to the readme, usually its assumed you have react-native installed which comes with this preset.

storybookjs / addon-react-native-web