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

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

@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.

@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.

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

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.

@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.

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

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 😦

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