Unable to load storybook on web

[Saad-Bashar]

I am following the template repo to setup storybook in my react native app. I installed the same versions for all the storybook related packages and I was able to run storybook on device. However I am getting a lots of errors when building the storybook on the web. I can see my stories behind the black error message. I can also customize stories using the addons. However the error message is still there. Seems like they are coming from sentry RCTNetworking. I am not sure.

Here is my package.json,

{
  "scripts": {
    "update-stories": "sb-rn-get-stories --config-path .ondevice",
    "prestart": "yarn update-stories",
    "storybook-watcher": "sb-rn-watcher --config-path .ondevice",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@alessiocancian/react-native-actionsheet": "^3.2.0",
    "@gorhom/bottom-sheet": "^4",
    "@react-native-community/checkbox": "^0.5.5",
    "@react-native-community/datetimepicker": "^3.5.0",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/netinfo": "^9.3.0",
    "@react-native-community/push-notification-ios": "^1.10.1",
    "@react-native-community/slider": "^4.2.3",
    "@react-native-community/viewpager": "^5.0.11",
    "@react-native-masked-view/masked-view": "^0.2.9",
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/drawer": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/stack": "^6.3.16",
    "@reduxjs/toolkit": "^1.9.5",
    "@sentry/react-native": "^5.5.0",
    "deprecated-react-native-prop-types": "^4.1.0",
    "expo": "^49.0.0",
    "expo-location": "~16.1.0",
    "immutable": "^3.8.1",
    "info": "^0.0.6-beta.0",
    "keymirror-nested": "^1.0.3",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-native": "0.72.4",
    "react-native-action-button": "^2.8.5",
    "react-native-blob-util": "^0.19.0",
    "react-native-bootsplash": "^4.4.0",
    "react-native-calendars": "1.1274.0",
    "react-native-config": "^1.5.0",
    "react-native-device-info": "^10.3.0",
    "react-native-document-picker": "^7.1.3",
    "react-native-element-dropdown": "^2.0.0",
    "react-native-flash-message": "^0.3.1",
    "react-native-fs": "^2.16.6",
    "react-native-geolocation-service": "^5.3.1",
    "react-native-gesture-handler": "^2.10.1",
    "react-native-google-places-autocomplete": "^2.4.1",
    "react-native-image-picker": "5.4.2",
    "react-native-in-app-review": "^4.1.1",
    "react-native-keyboard-aware-scroll-view": "github:APSL/react-native-keyboard-aware-scroll-view#pull/501/head",
    "react-native-map-link": "^2.11.2",
    "react-native-maps": "^1.4.0",
    "react-native-markdown-display": "^7.0.0-alpha.2",
    "react-native-mixpanel": "^1.2.3",
    "react-native-modal": "^13.0.1",
    "react-native-modal-datetime-picker": "^14.0.1",
    "react-native-modal-selector": "^2.0.3",
    "react-native-pdf": "^6.7.1",
    "react-native-permissions": "^3.6.1",
    "react-native-push-notification": "^8.1.1",
    "react-native-reanimated": "^3.5.2",
    "react-native-redash": "^18.1.0",
    "react-native-safe-area-context": "^4.7.2",
    "react-native-screens": "^3.25.0",
    "react-native-scrollable-tab-view": "^1.0.0",
    "react-native-share": "^7.6.2",
    "react-native-svg": "^12.1.1",
    "react-native-swipe-list-view": "^3.2.4",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "^0.18.10",
    "react-native-webview": "^13.6.0",
    "react-redux": "^8.1.1",
    "redux": "^4.0.5",
    "redux-actions": "^2.6.5",
    "redux-catch-promise": "^1.0.3",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-persist-transform-immutable": "^5.0.0",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@cfaester/enzyme-adapter-react-18": "^0.7.1",
    "@react-native-async-storage/async-storage": "^1.17.7",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@storybook/addon-actions": "^6.5.14",
    "@storybook/addon-controls": "^6.5.14",
    "@storybook/addon-essentials": "^6.5.14",
    "@storybook/addon-links": "^6.5.14",
    "@storybook/addon-ondevice-actions": "^6.5.1",
    "@storybook/addon-ondevice-backgrounds": "^6.5.1",
    "@storybook/addon-ondevice-controls": "^6.5.1",
    "@storybook/addon-ondevice-notes": "^6.5.1",
    "@storybook/addon-react-native-web": "^0.0.19",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/react": "^6.5.14",
    "@storybook/react-native": "^6.5.1",
    "@storybook/testing-library": "^0.0.13",
    "@testing-library/jest-native": "^5.4.3",
    "@testing-library/react-native": "^12.3.0",
    "@tsconfig/react-native": "^3.0.0",
    "@types/jest": "^28.1.3",
    "@types/react": "^18.0.24",
    "@types/react-native": "^0.69.0",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "chai": "^4.2.0",
    "detox": "19.12.5",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
    "enzyme-to-json": "^3.6.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "jest-circus": "^29.2.1",
    "jest-cli": "^29.2.1",
    "jest-config": "^29.2.1",
    "jest-environment-jsdom": "^29.2.1",
    "jest-enzyme": "^7.1.2",
    "jest-fetch-mock": "^3.0.3",
    "jest-html-reporter": "^3.3.0",
    "jest-junit": "^12.0.0",
    "jsdom": "11.11.0",
    "metro-react-native-babel-preset": "0.76.8",
    "mocha": "^8.2.0",
    "patch-package": "^6.2.2",
    "postinstall-postinstall": "^2.1.0",
    "prettier": "^2.4.1",
    "react-dom": "^18.2.0",
    "react-test-renderer": "18.2.0",
    "reactotron-react-native": "^5.0.3",
    "reactotron-redux": "^3.1.3",
    "redux-devtools-extension": "^2.13.9",
    "redux-mock-store": "^1.5.4",
    "sinon": "^9.2.0",
    "tailwindcss": "3.3.2",
    "typescript": "4.8.4"
  },
  "resolutions": {
    "@types/react": "^18.0.24"
  },
  "engines": {
    "node": ">=16"
  }
}

.storybook/main.js,

module.exports = {
  stories: [
    '../app/components/**/*.stories.@(js|jsx|ts|tsx)',
    '../app/screens/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-react-native-web',
  ],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
};

Please let me know if I am doing anything wrong. Thanks a lot!

[dannyhw]

Thats a lot of libraries and some of them are not compatible with the web. You will need to go through and see which ones are compatible and some will need to be transpiled with the modules to transpile option whilst others can be aliased to a web version.