Storybook 5 for React Native: "Can't find variable: document"

Describe the bug I’m running into this issue “Can’t find variable: document” error when launching react-native app with storybook. I have commented out addon.js in index.js but it is still returning the same error.

To Reproduce git clone https://github.com/yongching/storybook-bug

1. yarn storybook
2. yarn haul
3. react-native run-ios
4. see error

Code Snippet package.json

{
  "name": "StorybookBug",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "haul": "haul --platform ios --eager ios",
    "storybook": "start-storybook -p 7007"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-dom": "16.6.1",
    "react-hot-loader": "4.8.0",
    "react-native": "0.59.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/runtime": "^7.4.5",
    "@emotion/core": "^10.0.10",
    "@storybook/addon-actions": "^5.1.3",
    "@storybook/addon-links": "^5.1.3",
    "@storybook/addons": "^5.1.3",
    "@storybook/react-native": "^5.1.3",
    "@storybook/react-native-server": "^5.1.3",
    "babel-jest": "^24.8.0",
    "babel-loader": "^8.0.6",
    "emotion-theming": "^10.0.10",
    "haul": "^1.0.0-rc.15",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.54.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

Expected behavior It should run without any issues.

System:

• OS: [e.g. iOS, MacOS]
• Device: [e.g. iPhoneX, Macbook Pro 2015]
• Framework: [e.g. react-native 0.59.0]

[jaridmargolin]

I’ve been able to track this pesky error down.

I am confident this is not an issue with Storybook, but instead, it is with webpack or Haul. The behavior I am seeing from webpack is what I would deem unexpected, but it is perhaps intended. I need to dig a little further to determine where exactly the fix should be introduced.

What is happening?

emotion utilizes the browser and react-native fields within its package.json (more information here). Unexpectedly, when compiling, emotion-theming and @emotion/core are resolving to utilize the browserdist files.

This is misleading because the Haul config appears to correctly set resolve.mainFields to ['react-native', 'browser', 'main'], which defines that react-native should take prescedence.

Solutions

It turns out that there is another field, aliasFields, which webpack adds a default option for when running with the web or webworker target (Haul sets target: 'webworker'). The aliasFields will be resolved regardless of what is set in mainFields.

The question now becomes, is it correct for webpack to resolve aliasFields regardless of if the aliasFields exist in mainFields? If the answer is yes, then Haul needs to update it’s config to add react-native to aliasFields. If the answer is no, then webpack needs to be patched.

Temporary Workaround

In the meantime, ya’ll can work around this by modifying your Haul config:

import { createWebpackConfig } from "haul";

export default {
  webpack: env => {
    const config = createWebpackConfig({
      entry: './index.js',
    })(env);

    // The fix :)
    config.resolve.aliasFields = ['react-native', 'browser']

    return config;
  }
};

[apexskier]

@SerhiyZheliznjak I’m using @storybook/react-native@5.1.0-alpha.8, @storybook/react@5.1.4, and haul@1.0.0-rc.15 successfully.