Android Bundling failed 3112ms Unable to resolve "@storybook/react-native" from ".storybook/index.tsx"

[viter-sweatcon]

Describe the bug
I try to run story book from example project (from tag 6.5.8) but I get error for both android and web build (didn't try iOS)

To Reproduce
Steps to reproduce the behavior:

1. Download repo from version 6.5.8
2. Open expo-example by VScode
3. open terminal in this folder
4. execute yarn command
5. execute yarn web or yarn android

Expected behavior
Storybook launched on android or in a browser

Actual result
I get error: Android Bundling failed 27ms Unable to resolve "@storybook/react-native" from ".storybook/index.tsx"
same for web.

What I do wrong ?

Screenshots
If applicable, add screenshots to help explain your problem.

[viter-sweatcon]

I deleted all files from storybookjs/react-native project then re-run yarn and then I received new error: Unable to resolve "@babel/runtime/helpers/interopRequireDefault" from "index.js"

[dannyhw]

can you show the versions of each storybook package that you have installed?

[viter-sweatcon]

I don't understand a question :( I didn't write(add) any code. By the way this project https://github.com/dannyhw/expo-storybook-starter - works fine out the box.

[dannyhw]

oh I see the example project, sorry I didn't read the post correctly. Let me double check that.

[dannyhw]

@viter-sweatcon You just need to run yarn storybook-generate first, sorry about the confusion. Just pushed the generated file so its easier to get started.

[viter-sweatcon]

I used command yarn storybook-generate and I tried one more time do this but still have error: "@babel/runtime/helpers/interopRequireDefault" from "index.js"

[dannyhw]

can you try the next branch

[scesbron]

I think I have the same problem but it's hard for me to have a reproducible example.

Our app is a monorepo and we just did the migration from storybook 6 to storybook 7. My dependencies for my react-native storybook are

    "@storybook/addon-actions": "~7.6.17",
    "@storybook/addon-ondevice-actions": "~7.6.15",
    "@storybook/addon-ondevice-controls": "~7.6.15",
    "@storybook/react": "~7.6.17",
    "@storybook/react-native": "~7.6.15",

After the migration our app on dev works well but when we want to build it we have the error

error Unable to resolve module @babel/runtime/helpers/interopRequireDefault from /Users/seb/dev/front/packages/mobile-ui/index.tsx: @babel/runtime/helpers/interopRequireDefault could not be found within the project or in these directories:
  node_modules
  ../../node_modules
> 1 | import React from 'react';

@babel/runtime is in our monorepo dependencies in latest version 7.23.9.

[dannyhw]

@scesbron what do you mean by "when we want to build it" what command are you using for that for example.

[scesbron]

The command is a bit complex because of our monorepo setting but basically it does the same thing as npx react-native bundle.

[dannyhw]

@scesbron do you have the storybook requires file generated? that seems to have been the problem for this issue originally.

It's really hard to pinpoint an issue for you without more context on your problem though.

[scesbron]

@dannyhw yes the storybook file are generated.

We finally solved our issue, our problem was linked to the fact that we are using storybook in a monorepo.

We updated our metro config based on this doc https://github.com/storybookjs/react-native/blob/next/MIGRATION.md#metro-config

With our setup the config was not correct we needed to keep some particularities to define the projectRoot

const root = path.resolve(__dirname, '../../');
module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig(__dirname);

  return {
    projectRoot: root,

[dannyhw]

please let me know if this needs to be re-opened but it seems like this was a metro config thing