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

[sregg]

Bug

Getting "Can't find variable: document" error when launching React-Native app with storybook.

Steps to reproduce

1. Create React_Native 0.56 app: react-native init TestStoryBookReactNative
2. Install storybook CLI 4.0.0-alpha.16: npm i -g @storybook/[email protected]
3. Install storybook in project: cd TestStoryBookReactNative and getstorybook
4. Run storybook: npm run storybook
5. See this error: error: 'Plugin 0 provided an invalid property of "default"' when using with React Native + TypeScript #3897
6. Install Babel 7: yarn remove babel-core and yarn add -D @babel/[email protected] [email protected]
7. Run storybook again: npm run storybook no more error
8. Check that http://localhost:7007/ works
9. Launch iOS app: react-native run-ios
10. Get "Can't find variable: document" error

Please specify which version of Storybook and optionally any affected addons that you're running

my package.json:

{
  "name": "TestStoryBookReactNative",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "storybook": "storybook start -p 7007"
  },
  "dependencies": {
    "react": "16.4.1",
    "react-native": "0.56.0"
  },
  "devDependencies": {
    "@babel/core": "7.0.0-beta.47",
    "@storybook/addon-actions": "^4.0.0-alpha.16",
    "@storybook/addon-links": "^4.0.0-alpha.16",
    "@storybook/addons": "^4.0.0-alpha.16",
    "@storybook/react-native": "^4.0.0-alpha.16",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "23.4.2",
    "babel-preset-react-native": "^5",
    "babel-runtime": "^6.26.0",
    "jest": "23.5.0",
    "prop-types": "^15.6.2",
    "react-dom": "16.4.1",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

[ritz078]

did you find any solution for this?

[sregg]

@ritz078 nope, I gave up...

[chrisnojima]

I don't have a fix for this yet but what I've seen so far
importing {storiesOf} from '@storybook/react-native' pulls in a series of imports

@storybook/react-native/dist/index.js
dist/preview/index.js
components/dist/index.js
which ultimately pulls in input which pulls in react-textarea-autosize. This seems like the native side is getting mixed with the web ui side again (similar to #3068)

[igor-dv]

Does it happen without any addons as well?

[Gongreg]

Hey. It happens always:
Reason:

Addons/index.js

import { TabWrapper } from '@storybook/components';

This line brings many things that are not relevant to RN and is part of global import.

In first place no ui should be inside @storybook/addons at all

@igor-dv

[igor-dv]

So, do we have a bug?

[Gongreg]

Yes :)

[igor-dv]

🤦‍♂️

I think we need to add some test that will prevent this kind of bugs.

[Gongreg]

Simple sanity test would help a lot here. We could try to add detox tests in the future for React Native.

[igor-dv]

I am fixing this.

[ndelangen]

@igor-dv @Gongreg and i talked a bit about this, we think the best method to fix this is by moving this code to /lib/ui somewhere:

https://github.com/storybooks/storybook/blob/master/lib/addons/src/index.js#L56-L62

[Gongreg]

Hello,

4.0.0-alpha.20 was released. It should solve this issue.

[aleclarson]

I'm seeing this error in @storybook/[email protected]

edit: Nevermind, my fault, same as #4642