React-Native: "Can't find variable: document"

Describe the bug Getting “Can’t find variable: document” error when launching React-Native app with storybook. This is only coming when i am including this line import '@storybook/addon-actions/register'; If I comment out above line in addon.js, then everything is working fine.

To Reproduce Steps to reproduce the behavior:

1. Create a react native project
2. Install storybook using this command npm i --save-dev @storybook/react-native
3. Create storybook folder and include index.js file as mention in this doc
4. Install action addon using this command npm i -D @storybook/addon-actions
5. Create a addon.js in storybook folder and write this in it import '@storybook/addon-actions/register';
6. Now in storybook/index.js import addon.js file

Expected behavior The app should have shown stories instead get a error screen

Screenshots

Code snippets package.json

{
  "name": "magento_react_native",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "storybook": "storybook start"
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.3.0",
    "axios": "^0.18.0",
    "immutable": "^4.0.0-rc.12",
    "native-base": "^2.12.0",
    "prop-types": "^15.7.2",
    "react": "16.8.3",
    "react-native": "0.59.5",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-swiper": "^1.5.14",
    "react-native-vector-icons": "^6.4.1",
    "react-navigation": "^3.3.2",
    "react-navigation-header-buttons": "^2.2.0",
    "react-redux": "7.1.0-alpha.4",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.0.2"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^5.0.11",
    "@storybook/react-native": "^4.1.18",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "24.3.1",
    "eslint": "^5.15.3",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-native": "^3.6.0",
    "jest": "24.3.1",
    "metro-react-native-babel-preset": "0.53.0",
    "react-test-renderer": "16.8.4"
  },
  "jest": {
    "preset": "react-native"
  }
}

storybook/index.js

/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable global-require */
import { AppRegistry } from 'react-native';
import { getStorybookUI, configure } from '@storybook/react-native';
import { name as appName } from '../app.json';

import './addons';

// import stories
configure(() => {
  require('../src/components/atoms/Text/stories');
  require('../src/components/atoms/Button/stories');
}, module);

// Refer to https://github.com/storybooks/storybook/tree/master/app/react-native#start-command-parameters
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({});

// If you are using React Native vanilla write your app name here.
// If you use Expo you can safely remove this line.
AppRegistry.registerComponent(appName, () => StorybookUIRoot);

export default StorybookUIRoot;

storybook/addon.js

import '@storybook/addon-actions/register';

System:

• OS: [Android version 9]
• Device: [Nexus 5x Emulator]
• Browser: [firefox]
• Framework: [react-native]
• Addons: [@storybook/addon-actions]
• Version: [5.0.11]

Additional context If I comment out code in addons.js then I am not getting that error issue similar to #4063

[Gongreg]

@alexakasanjeev Regarding your question. You are already contributing by asking questions and answering them. 😃 Helping out with docs and questions is as important as writing code.

But since you want to contribute to bigger project with code Storybook should be really good place to start. It is already a big project but there are people who try to make sure (@ndelangen) that everyone can contribute here. Some other bigger repos have strict rules about making PRs for them.

If you need ideas what code you can write then ir can be solving an annoying bug that keeps happening, adding a small feature, etc. If you do something that benefits your work chances are that it will also help others.

If we were to talk specifically about react-native part of storybook it can be a little daunting, since there are no tests. But almost all pull requests are merged, since we don’t have strict standards for the code. We just want that you make sure that things you add work and thst it doesnt break other things.

Also by contributing to small projects you are already bringing positive impact. So there is no shame in working on smaller projects. Also that should make you feel stronger when you want to contribute on bigger projects.

If you have any questions always feel free to ask them here or you can PM me. 😃

Sorry if there are any typos, writing on the phone

[rakibhasan48]

I am facing the same issue. If I remove the following line from storybook/index.js my app works :

import './rn-addons'; // import './addons';

But as a result nothing shows up in the storybook web server. Is there any way for the web server and the app to work at the same time?