@storybook/addon-react-native-web gets stuck building webpack-dev-middleware

Question

I'm running a create-react-app (react 18.2.0) with react-native-web (0.18.10) and storybook (6.5.13) with the addon @storybook/addon-react-native-web (0.0.19). It runs fine with react native code in the App.js file when I run npm run start.

But when I run npm run storybook it gets stuck loading at:

$ start-storybook -p 6006
info @storybook/react v6.5.13
info 
info => Loading presets
info => Serving static files from ././public at /
info Addon-docs: using MDX1
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modules
info => Using cached manager
58% building 14/16 entries 5027/5027 dependencies 1107/1127 modules

The bug is not an issue with the plugin installed to the package but it does occur when I add @storybook/addon-react-native-web to the storybook/main.js file.

Answer 1

I noticed when I ran yarn install, that the react native web storybook addon had unmet dependencies:

warning " > @storybook/[email protected]" has unmet peer dependency "@babel/preset-react@*".
warning " > @storybook/[email protected]" has unmet peer dependency "@storybook/addons@*".
warning " > @storybook/[email protected]" has unmet peer dependency "@storybook/api@*".
warning " > @storybook/[email protected]" has unmet peer dependency "@storybook/components@*".
warning " > @storybook/[email protected]" has unmet peer dependency "@storybook/core-events@*".
warning " > @storybook/[email protected]" has unmet peer dependency "@storybook/theming@*".
warning " > @storybook/[email protected]" has unmet peer dependency "metro-react-native-babel-preset@*".
warning " > @storybook/[email protected]" has unmet peer dependency "@babel/core@*".

So I installed them manually:

 yarn add -D @babel/preset-react @storybook/addons @storybook/api @storybook/components @storybook/core-events @storybook/theming  metro-react-native-babel-preset @babel/core

And now it works!