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

[yongching]

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]

[apexskier]

I'm seeing this as well. Looking into the stack trace, this line appears to be triggering the issue: https://github.com/emotion-js/emotion/blob/41f7ba1c6b7f74cde2c6b6fd5f3333e02e2c154b/packages/cache/src/index.js#L69
That's supposed to be stripped out for non-browser environments, but the cache.browser.cjs.js file is being loaded, so it's still there and is failing.

I'm guessing this was caused by https://github.com/storybookjs/storybook/pull/6603 somehow, since that's where emotion was introduced. I installed the alpha from just before that was added and don't see the issue.

[benoitdion]

@apexskier @yongching I wonder if this is because you're using haul. Are you able to reproduce with the metro bundler?

[apexskier]

That could be the case, we're using haul as well. I'm unable to build our project with metro alone though, so I can't test reproduction there.

[benoitdion]

haven't played with the bug repro repo yet but based on what I'm seeing it looks like it may be an emotion issue with haul :(

[SerhiyZheliznjak]

Hi!
Got the same issue, not using haul.
@apexskier could you tell the version that is working?

[yongching]

@benoitdion I just did a quick experiment using metro bundler, it has a similar issue. Here's the repo, https://github.com/yongching/storybook-with-metro.

[SerhiyZheliznjak]

Btw, as soon as you don't use any addons the issue is gone

[yongching]

@SerhiyZheliznjak yeah true. But when I use it with haul, even if I remove all the addons it will still have the issue.

[alexakasanjeev]

Hi @SerhiyZheliznjak I opened a similar issue #6910 , please look into it.

Hi yongching, I cloned your repo and did all the steps (except I ran react-native run-android), in my computer it is working fine, there is no document error.
Could you try doing this

1. in terminal run rm -rf node_modules to delete node_modules folder
2. yarn install
   and then your steps...

Explanation: why you need to comment addon.js import
Basically If you are using @storybook/react-native-server you don't need to import action addon. react-native-server will do it automatically (explained in this comment) so in your storybook/index.js comment the line which is importing addon, and it will work fine.

If it's still unclear let me know.

[yongching]

@alexakasanjeev may I know which repo did you clone? The one with metro bundler will work fine if I remove the addons https://github.com/yongching/storybook-with-metro. But not the one with haul https://github.com/yongching/storybook-bug.

[alexakasanjeev]

I cloned https://github.com/yongching/storybook-bug this repo and I did run yarn haul and it worked fine, also I explained in the comments above that if you are using react-native-server then you don't need to add action addon, it will do automatically

[Gongreg]

@alexakasanjeev, thank you for raising that point. Someone accidentally added the import to the template. Created PR https://github.com/storybookjs/storybook/pull/7096 to fix it.

[Gongreg]

Okay, so there are two issues. One is accidentally added ./addons import when installing storybook and two, incompatibility between haul and emotion.

Could we please leave this discussion for haul/emotion incompatibility?

[apexskier]

@SerhiyZheliznjak I'm using @storybook/[email protected], @storybook/[email protected], and [email protected] successfully.

[yongching]

@alexakasanjeev thanks for pointing that out. After commenting the addons import, android would work. But iOS still the same.

[yongching]

@apexskier that worked for me on ios! Thank you so much.

[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;
  }
};

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!