[Bug]: Storybook: Expo: Getting ERROR Unhandled promise rejection [RangeError: Maximum call stack size exceeded (native stack depth)]

[JRDspace]

Describe the bug

I have incorporated Storybook into my existing React Native Expo project. However, upon launching Storybook, it is throwing the below error

Getting Unhandled promise rejection [RangeError: Maximum call stack size exceeded (native stack depth)] for storybook expo

Here is how my App.tsx looks like

const App = () => (<TSX element>);
let AppEntryPoint = App;
if (Constants?.expoConfig?.extra?.storybookEnabled === "true") {
  const { default: storybookEntryPoint } = require("./.storybook");
  AppEntryPoint = storybookEntryPoint;
}

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "storybook-generate": "sb-rn-get-stories",
    "storybook-watch": "sb-rn-watcher",
    "storybook": "sb-rn-get-stories && STORYBOOK_ENABLED='true' expo start",
    "storybook:ios": "sb-rn-get-stories && STORYBOOK_ENABLED='true' expo start --ios",
    "storybook:android": "sb-rn-get-stories && STORYBOOK_ENABLED='true' expo start --android"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@expo/webpack-config": "^18.0.1",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-masked-view/masked-view": "0.2.8",
    "@react-navigation/bottom-tabs": "^5.11.8",
    "@react-navigation/native": "^5.0.5",
    "@react-navigation/stack": "^5.14.3",
    "expo": "latest",
    "expo-constants": "^14.2.1",
    "expo-status-bar": "latest",
    "expo-updates": "latest",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.6",
    "react-native-card-stack-swiper": "^1.2.5",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-screens": "~3.20.0",
    "react-native-web": "~0.18.11",
    "react-navigation": "^4.4.4",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/helper-get-function-arity": "^7.16.7",
    "@babel/preset-env": "^7.21.4",
    "@react-native-async-storage/async-storage": "1.17.11",
    "@react-native-community/datetimepicker": "6.7.3",
    "@react-native-community/slider": "^4.4.2",
    "@storybook/addon-actions": "^6.5.14",
    "@storybook/addon-controls": "^6.5.14",
    "@storybook/addon-ondevice-actions": "^6.5.1",
    "@storybook/addon-ondevice-controls": "^6.5.1",
    "@storybook/react-native": "^6.5.1",
    "@types/react": "~18.0.27",
    "@types/react-dom": "~18.0.10",
    "@types/react-native": "~0.63.2",
    "babel-loader": "^8.3.0",
    "prettier": "^2.2.1",
    "react-native-safe-area-context": "4.5.0",
    "typescript": "^4.9.4",
    "webpack": "^5.80.0"
  },
  "private": true
}

Could you please assist me with this issue? Let me know if there is any additional information that I should provide. Thank you.

I attempted to resolve the issue by modifying the react-native package version and experimenting with different versions of storybook, as advised by several users on the GitHub issues page, but nothing worked.

[dannyhw]

Duplicate #405.

Fix is to set resolvers in metro config:

First create metro config file if you don't have it yet.

npx expo customize metro.config.js

Then add sbmodern to the start of the resolver.resolverMainFields list.

// metro.config.js

const { getDefaultConfig } = require('expo/metro-config');

--module.exports = getDefaultConfig(__dirname);
++const defaultConfig = getDefaultConfig(__dirname);

++defaultConfig.resolver.resolverMainFields.unshift('sbmodern');

++module.exports = defaultConfig;

[dannyhw]

Closing since this is a duplicate, if you have reason to believe its a separate issue let me know and i can reopen