Examples cannot be run on Android & macOS on the next-6.0 branch

[lauriharpf]

Describe the bug
React Native Storybook examples cannot be run on Android & macOS with 3a199cc

To Reproduce
Steps to reproduce the behavior:

1. Clone the repository:

git clone https://github.com/storybookjs/react-native.git react-native-storybook
cd react-native-storybook
yarn bootstrap --core
yarn dev

2. In another terminal window:

cd examples/native
yarn
yarn android

3. Metro reports an error and the application fails to start:

Error: EISDIR: illegal operation on a directory, read
    at Object.readSync (fs.js:592:3)
    at tryReadSync (fs.js:366:20)
    at Object.readFileSync (fs.js:403:19)
    at UnableToResolveError.buildCodeFrameMessage (/Users/lauriharpf/Repos/lauriharpf/react-native-storybook/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:347:17)
    at new UnableToResolveError (/Users/lauriharpf/Repos/lauriharpf/react-native-storybook/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:333:35)
    at ModuleResolver.resolveDependency (/Users/lauriharpf/Repos/lauriharpf/react-native-storybook/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:211:15)
    at DependencyGraph.resolveDependency (/Users/lauriharpf/Repos/lauriharpf/react-native-storybook/node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
    at /Users/lauriharpf/Repos/lauriharpf/react-native-storybook/node_modules/metro/src/lib/transformHelpers.js:317:42
    at /Users/lauriharpf/Repos/lauriharpf/react-native-storybook/node_modules/metro/src/Server.js:1471:14
    at Generator.next (<anonymous>)

Expected behavior
The example app starts and examples can be used to verify functionality.

Screenshots
Screenshot of emulator with react-native 0.64.1 as the specified dependency in /examples/native/package.json:

Screenshot of emulator with react-native 0.64.2 as the specified dependency in /examples/native/package.json (see "Additional context"):

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

Environment Info:

  System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 16.4.0 - ~/.nvm/versions/node/v16.4.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v16.4.0/bin/yarn
    npm: 7.19.0 - ~/.nvm/versions/node/v16.4.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Safari: 14.1.1

Additional context
If the react-native dependency in /examples/native/package.json is bumped to 0.64.2, the error reported in Metro console is different:

error: Error: Unable to resolve module ./storybook.requires from /Users/lauriharpf/Repos/lauriharpf/react-native-storybook/examples/native/Storybook.tsx: 

None of these files exist:
  * storybook.requires(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * storybook.requires/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  2 | import { getStorybookUI } from '@storybook/react-native';
  3 | 
> 4 | import './storybook.requires';
    |         ^
  5 | 
  6 | const StorybookUIRoot = getStorybookUI({
  7 |   asyncStorage: AsyncStorage,
    at ModuleResolver.resolveDependency (/Users/lauriharpf/Repos/lauriharpf/react-native-storybook/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:211:15)
    at DependencyGraph.resolveDependency (/Users/lauriharpf/Repos/lauriharpf/react-native-storybook/node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
    at Object.resolve (/Users/lauriharpf/Repos/lauriharpf/react-native-storybook/node_modules/metro/src/lib/transformHelpers.js:317:42)
    at resolve (/Users/lauriharpf/Repos/lauriharpf/react-native-storybook/node_modules/metro/src/DeltaBundler/traverseDependencies.js:629:33)
    at /Users/lauriharpf/Repos/lauriharpf/react-native-storybook/node_modules/metro/src/DeltaBundler/traverseDependencies.js:645:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (/Users/lauriharpf/Repos/lauriharpf/react-native-storybook/node_modules/metro/src/DeltaBundler/traverseDependencies.js:644:33)
    at /Users/lauriharpf/Repos/lauriharpf/react-native-storybook/node_modules/metro/src/DeltaBundler/traverseDependencies.js:329:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/lauriharpf/Repos/lauriharpf/react-native-storybook/node_modules/metro/src/DeltaBundler/traverseDependencies.js:137:24)

For clarity, I'm also unable to run the examples on iOS (Metro fails to start). Attempting to run on Android produces better debugging information, so focusing the report on that.

[dannyhw]

you might need to run yarn start manually inside the native example folder for the bundler to work properly. The example works for me but I always manually run the bundler.

[lauriharpf]

you might need to run yarn start manually inside the native example folder for the bundler to work properly. The example works for me but I always manually run the bundler.

Thank you! 🙏 👍

The example app starts fine by replacing step 2 in this report with

cd examples/native
yarn
yarn start
yarn android # in another terminal

It also works on iOS. I'll make a PR to document this to https://github.com/storybookjs/react-native/blob/3a199cce9cd8c4563683930247cc1777f02d4399/CONTRIBUTING.md#native-app . Not sure why the yarn start is required (instead of jumping straight to yarn android) and whether it would be possible eliminate the yarn start, but that's not in scope here.

I'll close this as the issue is clearly solved by running yarn start first. Thanks again!

[dannyhw]

@lauriharpf great, glad that it worked :).

Just one more note, you only need to run yarn install once in the root of the project due to the mono repo setup. So you shouldn't need to run yarn before running the example if you already ran the install in the root.

Running yarn start manually is required because of the hoisted node_modules. The react native package assumes that the bundler should be started from where the node_modules folder is.