Storybook not working with React-Native Expo

[Silthus]

Current Behavior

I generated a native storybook for an expo app using the nx g @nx/react-native:storybook app command. When I try to start my native expo app I get a metro bundler error saying it cannot load from /.storybook/story-loader.

[Nx] Unable to resolve with default resolveRequest: @hoehensucht/feature/area-list
[Nx] Unable to resolve with default Metro resolver: @hoehensucht/feature/area-list
[Nx] Located tsconfig at C:\dev\projects\hoehensucht\hoehensucht
[Nx] Found the following paths:
:{
  "@hoehensucht/feature/account": [
    "libs/feature/account/src/index.ts"
  ],
  "@hoehensucht/feature/area-list": [
    "libs/feature/area-list/src/index.ts"
  ],
  "@hoehensucht/shared/provider": [
    "libs/shared/provider/src/index.ts"
  ],
  "@hoehensucht/shared/types": [
    "libs/shared/types/src/index.ts"
  ],
  "@hoehensucht/ui": [
    "libs/ui/src/index.ts"
  ]
}
[Nx] Resolving: @hoehensucht/shared/provider
[Nx] Unable to resolve with default resolveRequest: @hoehensucht/shared/provider
[Nx] Unable to resolve with default Metro resolver: @hoehensucht/shared/provider
iOS ./index.js ▓▓▓▓▓▓▓░░░░░░░░░ 49.5% ( 814/1157)[Nx] Resolving: ../../../../.storybook/story-loader.js
[Nx] Unable to resolve with default resolveRequest: ../../../../.storybook/story-loader.js
[Nx] Unable to resolve with default Metro resolver: ../../../../.storybook/story-loader.js
[Nx] Failed to resolve ../../../../.storybook/story-loader.js
[Nx] The following tsconfig paths was used:
:{
  "@hoehensucht/feature/account": [
    "libs/feature/account/src/index.ts"
  ],
  "@hoehensucht/feature/area-list": [
    "libs/feature/area-list/src/index.ts"
  ],
  "@hoehensucht/shared/provider": [
    "libs/shared/provider/src/index.ts"
  ],
  "@hoehensucht/shared/types": [
    "libs/shared/types/src/index.ts"
  ],
  "@hoehensucht/ui": [
    "libs/ui/src/index.ts"
  ]
}
iOS Bundling failed 14893ms
error: ReferenceError: SHA-1 for file C:\dev\projects\hoehensucht\hoehensucht\.storybook\story-loader.js (C:\dev\projects\hoehensucht\hoehensucht\.storybook\story-loader.js) is not computed.
         Potential causes:
           1) You have symlinks in your project - watchman does not follow symlinks.
           2) Check `blockList` in your metro.config.js and make sure it isn't excluding the file path.
    at DependencyGraph.getSha1 (C:\dev\projects\hoehensucht\hoehensucht\node_modules\metro\src\node-haste\DependencyGraph.js:217:13)
    at Transformer._getSha1 (C:\dev\projects\hoehensucht\hoehensucht\node_modules\metro\src\Bundler.js:26:26)
    at Transformer.transformFile (C:\dev\projects\hoehensucht\hoehensucht\node_modules\metro\src\DeltaBundler\Transformer.js:106:19)
    at Bundler.transformFile (C:\dev\projects\hoehensucht\hoehensucht\node_modules\metro\src\Bundler.js:60:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.transform (C:\dev\projects\hoehensucht\hoehensucht\node_modules\metro\src\lib\transformHelpers.js:143:12)
    at async Graph._processModule (C:\dev\projects\hoehensucht\hoehensucht\node_modules\metro\src\DeltaBundler\Graph.js:256:20)
    at async Graph._addDependency (C:\dev\projects\hoehensucht\hoehensucht\node_modules\metro\src\DeltaBundler\Graph.js:371:20)
    at async Promise.all (index 1)
    at async Graph._processModule (C:\dev\projects\hoehensucht\hoehensucht\node_modules\metro\src\DeltaBundler\Graph.js:321:5)
    at async Graph._addDependency (C:\dev\projects\hoehensucht\hoehensucht\node_modules\metro\src\DeltaBundler\Graph.js:371:20)
    at async Promise.all (index 5)
    at async Graph._processModule (C:\dev\projects\hoehensucht\hoehensucht\node_modules\metro\src\DeltaBundler\Graph.js:321:5)
    at async Graph._addDependency (C:\dev\projects\hoehensucht\hoehensucht\node_modules\metro\src\DeltaBundler\Graph.js:371:20)
    at async Promise.all (index 7)
    at async Graph._processModule (C:\dev\projects\hoehensucht\hoehensucht\node_modules\metro\src\DeltaBundler\Graph.js:321:5)

Expected Behavior

I expect the app to start and that I am able to use storybook.

GitHub Repo

https://github.com/Silthus/nx-examples-expo-storybook

Steps to Reproduce

1. Fork the repository
2. yarn install
3. nx start app
4. Download Expo Go on Android or iOS
5. Open Expo Go
6. Connect to the local development server
7. See the metro loading error in the console

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 18.16.0
   OS     : win32-x64
   yarn   : 1.22.5

   nx (global)        : 16.3.2
   nx                 : 16.4.0-beta.3
   @nx/js             : 16.4.0-beta.3
   @nx/jest           : 16.4.0-beta.3
   @nx/linter         : 16.4.0-beta.3
   @nx/workspace      : 16.4.0-beta.3
   @nx/angular        : 16.4.0-beta.3
   @nx/cypress        : 16.4.0-beta.3
   @nx/detox          : 16.3.2
   @nx/devkit         : 16.4.0-beta.3
   @nx/eslint-plugin  : 16.4.0-beta.3
   @nx/expo           : 16.3.2
   @nx/react          : 16.4.0-beta.3
   @nx/react-native   : 16.3.2
   @nx/storybook      : 16.3.2
   @nrwl/tao          : 16.4.0-beta.3
   @nx/web            : 16.4.0-beta.3
   @nx/webpack        : 16.3.2
   nx-cloud           : 16.0.5
   typescript         : 5.0.4
   ---------------------------------------
   Community plugins:
   @ngrx/component-store : 16.0.0
   @ngrx/effects         : 16.0.0
   @ngrx/entity          : 16.0.0
   @ngrx/router-store    : 16.0.0
   @ngrx/store           : 16.0.0
   @ngrx/store-devtools  : 16.0.0
   ---------------------------------------
   The following packages should match the installed version of nx
     - @nx/[email protected]
     - @nrwl/[email protected]
     - @nx/[email protected]
     - @nrwl/[email protected]
     - @nx/[email protected]
     - @nrwl/[email protected]
     - @nx/[email protected]
     - @nrwl/[email protected]
     - @nx/[email protected]
     - @nrwl/[email protected]

Failure Logs

Logs for your project will appear below. Press Ctrl+C to exit.
iOS Bundling failed 9865ms
error: ReferenceError: SHA-1 for file C:\dev\nx-examples-expo-storybook\.storybook\story-loader.ts (C:\dev\nx-examples-expo-storybook\.storybook\story-loader.ts) is not computed.
         Potential causes:
           1) You have symlinks in your project - watchman does not follow symlinks.
           2) Check `blockList` in your metro.config.js and make sure it isn't excluding the file path.
    at DependencyGraph.getSha1 (C:\dev\nx-examples-expo-storybook\node_modules\metro\src\node-haste\DependencyGraph.js:199:13)
    at Transformer._getSha1 (C:\dev\nx-examples-expo-storybook\node_modules\metro\src\Bundler.js:26:26)
    at Transformer.transformFile (C:\dev\nx-examples-expo-storybook\node_modules\metro\src\DeltaBundler\Transformer.js:108:19)
    at Bundler.transformFile (C:\dev\nx-examples-expo-storybook\node_modules\metro\src\Bundler.js:60:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.transform (C:\dev\nx-examples-expo-storybook\node_modules\metro\src\lib\transformHelpers.js:147:12)
    at async Graph._processModule (C:\dev\nx-examples-expo-storybook\node_modules\metro\src\DeltaBundler\Graph.js:214:20)
    at async Graph._addDependency (C:\dev\nx-examples-expo-storybook\node_modules\metro\src\DeltaBundler\Graph.js:314:20)
    at async Promise.all (index 1)
    at async Graph._processModule (C:\dev\nx-examples-expo-storybook\node_modules\metro\src\DeltaBundler\Graph.js:263:5)
    at async Graph._addDependency (C:\dev\nx-examples-expo-storybook\node_modules\metro\src\DeltaBundler\Graph.js:314:20)
    at async Promise.all (index 5)
    at async Graph._processModule (C:\dev\nx-examples-expo-storybook\node_modules\metro\src\DeltaBundler\Graph.js:263:5)
    at async Graph._addDependency (C:\dev\nx-examples-expo-storybook\node_modules\metro\src\DeltaBundler\Graph.js:314:20)
    at async Promise.all (index 4)
    at async Graph._processModule (C:\dev\nx-examples-expo-storybook\node_modules\metro\src\DeltaBundler\Graph.js:263:5)

Operating System

• [ ] macOS
• [ ] Linux
• [X] Windows
• [ ] Other (Please specify)

Additional Information

Steps after forking the fresh nx-example repo. Every step is also a commit in the linked repo.

1. yarn add -D @nx/expo @nx/react-native
2. ng g @nx/expo:app app
3. nx start app - validating that expo app works
4. Install expo-router
5. nx install app --packages="expo-router,react-native-safe-area-context,react-native-screens,expo-linking,expo-constants,expo-status-bar,react-native-gesture-handler"
6. Follow https://expo.github.io/router/docs/ to upgrade to expo-router
7. Update the babel.config.js to move the app dir to src/app
8. nx g @nx/react-native:storybook-configuration app
9. Adapt storybook config to work with expo-router (side note: an @nx/expo:storybook-configuration generator would be helpful)
10. nx start app --> error