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

[sanjeevyadavIT]

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]

Hey @alexakasanjeev, the issue happens because you include addons.js file inside storybook/index.js file. addons.js file is used only in web part of react native so there is no need to import it.

[sanjeevyadavIT]

@Gongreg So how do I use action addon, I am running storybook server, I am previewing stories on device and selecting stories from web browser, I want to see actions being logged, How do I do that?

[Gongreg]

You should see the action list in the addon panel inside the web browser or you can use https://github.com/storybookjs/storybook/tree/next/addons/ondevice-actions if you want to see them in the app.

Ping here if you can't get it to work. :)

[sanjeevyadavIT]

@Gongreg I am unable to see action in web browser, my addon panel is empty. I have the same code as above
and this is the screenshot, when I am clicking on button i cannot see any action being logged

[Gongreg]

Maybe you need to pass in —config option to storybook start? I am not really sure what the issue might be :/

[sanjeevyadavIT]

To see action panel in the addon panel, you need to add this line import '@storybook/addon-actions/register'; and when i am adding this line it is giving me that error, what should I do?

Can you tell me what kind of config I need to write in package.json??

[Gongreg]

Hey @alexakasanjeev,

If you want to see actions addon inside web addons panel you have to do this:

Add following content to .storybook/addons.js
import '@storybook/addon-actions/register';

That should be enough to get addons panel to appear in web.

If you want to see actions addon inside react native addons panel you have to do this:

Create a file called rn-addons.js in your storybook config.

Add following content to it:

import '@storybook/addon-ondevice-actions/register';
Then import rn-addons.js next to your getStorybookUI call.

import './rn-addons';

And that should be enough to get actions panel appear in react native.

[sanjeevyadavIT]

@Gongreg I have created a repo which has the setup and is giving can't find variable: document error.

Please clone the bug/storybook-addon-error branch and see for yourself that whta you have said above I am doing that but it is giving error.

https://github.com/alexakasanjeev/ecommerce-component-library/tree/bug/storybook-addon-error

[Gongreg]

Hello.
Could you remove this line? https://github.com/alexakasanjeev/ecommerce-component-library/blob/bug/storybook-addon-error/storybook/index.js#L5

[sanjeevyadavIT]

Hello @Gongreg, yes If i remove that line then the code is working fine, but the line is responsible for adding action tab, if I remove it then how will I see action tab in web browser.

I want to see action being logged, how can I do that, can you please fork and create a pull request with right code?

[Gongreg]

Hey @alexakasanjeev. I am on vacation right now and I don’t have access to a computer.

I can look into it in few days.

But the addons panel is supposed to work without including the line. When you run storybook server it automatically includes addons.js file for you.

[sanjeevyadavIT]

@Gongreg yes you are right the react-native-server automatically includes addons.js.

Thank you so much for all the support. :)

I have a personal question, if you don't prefer to answer, I understand.
How can I start contributing to open source project. I am contributing to open source but they are small project how do one start contributing on storybook, or react-native debugger, these types of project which are big, and by contributing I mean contribution in code(not doc editing and creating issue), where do one start?

[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?

[sanjeevyadavIT]

@rakibhasan48 hello, I was having the same issue, the storybook wasn't loading in the browser,
the solution is mention here #6489 (comment)

Make sure your storybook server and everything is running then
find our where your android sdk is installed

if your are on ubuntu it will be
home/your_username/Android/sdk

now in terminal type

cd home/your_username/Android/sdk/platform-tools

then run

./adb reverse tcp:7007 tcp:7007

I did that and refresh the app in emulator/device and refresh the browser and stories were loading.
ping me here if you have any problem

[rakibhasan48]

This solved the problem. Thanks a lot.

[sanjeevyadavIT]

You welcome :)

[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

[sanjeevyadavIT]

Thank you once again, I really appreciate you taking your time and helping newcomers and guiding. A years back I used to see OSS as this massive mountain that only experts used to climb, but as I started poking around github and started my own OSS project I get a hang of it, and my perspective changed. My main reason to do this is to improve my skills, to learn from the best and implement back that knowledge in my own project and my job.

I will keep all the points you mention in mind. I am happy that now I can contribute to OSS(no matter how small it is) and somehow help others.