"Can't find variable: document" React Native error (3.3.0-alpha.2)

[hellogerard]

Hello,

I am trying to get 3.3 up & running so that I can have accessibility labels (#1780) for Detox testing. Everything installs fine, but when I start up the app, I get a RSOD on Can't find variable: document.

The sheet.js in the trace is inside of the glamor package. That particular line looks like:

const oldIE = (() => {  
  if(isBrowser) {
    let div = document.createElement('div') // <--- this line 
    div.innerHTML = '<!--[if lt IE 10]><i></i><![endif]-->'
    return div.getElementsByTagName('i').length === 1
  }  
})()

isBrowser looks like:

const isBrowser = typeof window !== 'undefined'

(https://github.com/threepointone/glamor/blob/master/src/sheet.js)

Maybe there is a global.window defined in Storybook 3.3 that wasn't there in 3.2?

P.S. I realize this is alpha release, but I figured I'd report it sooner rather than later if it is legit. Also, my setup is a tad bit complicated — I'm using react-native-storybook-loader — so I tried to create a vanilla CRNA/Storybook repo for you, but I couldn't get past #1943.

Edit: Additional info

React Native: 0.47.2
Some npm ls output:

├─┬ @storybook/react-native@3.3.0-alpha.2
...
│ ├─┬ @storybook/addon-links@3.3.0-alpha.2
│ │ ├── @storybook/addons@3.3.0-alpha.2 deduped
│ │ ├─┬ @storybook/components@3.3.0-alpha.2
│ │ │ ├─┬ glamor@2.20.40

[danielduan]

Help highly appreciated!

Somehow react-native bundler is bundling glamorous and some React styled components inside the react-native bundle. I can't pin where this is happening because I'm not too familiar with the rn cli tools. If anyone has time, I'd love some help.

I get a slightly different error:

[tmeasday]

Had a look at this with @danielduan's help.

The issue comes from this line: https://github.com/storybooks/storybook/blob/release/3.3/addons/links/src/index.js#L8

The problem is that addon-links is imported from RN's preview context (here) (which runs inside react native, not a web browser). As addon links is importing our components (which are web components, reliant on glamorous which doesn't run in RN) we get an exception.

[tmeasday]

I'm not sure what the best solution is but it probably involves separating the "UI" exports from addon-links from the "functionality" exports. @Hypnosphi, what do you think?

[Hypnosphi]

Ok, so I can remove the reexport, and add a deprecation placeholder in case someone used it, right?

[tmeasday]

Probably -- perhaps it should be exported by addon-links/ui or something so people can use it?

[Hypnosphi]

maybe even addon-links/react (kinda like with addon-knobs)

[tmeasday]

That's technically accurate but maybe a little confusing as you may want to use the export within an addon which can work with any framework (but in the react-based manager UI of course). What do you think?

OTOH we would only want react users to use it. So maybe react is best. Addon authors can be trusted to work it out.

[tmeasday]

(updated my comment above with the opposite opinion ;) )

[Hypnosphi]

This component is rendered in preview not manager, so it's usable only in storybook for React

[tmeasday]

This component is rendered in preview not manager, so it's usable only in React environment

Oh, right. Even moreso then :)

[danielduan]

verified fixed with PR ^

[apawar14]

Hi,

I am not able to print "Hi" on screen.

[MaulikPlutus]

Can't find variable: autobind.

[MaulikPlutus]

`// @flow
import moment from "moment";
import * as React from "react";
import { StyleSheet, View, Text, TextInput, Switch } from "react-native";
import { H1, ListItem, List, Item, Body, Right, Icon, Picker, CheckBox, Button, SettingsSwitch, Container, Content, Segment } from "native-base";
import { BaseContainer, Styles, Avatar, Field, Small } from "../components";

import type {ScreenProps } from "../components/Types";

import variables from "../../native-base-theme/variables/commonColor";

export default class Contact extends React.Component<ScreenProps<>> {

//Variable define
// http://dev-app.pamtree.com/dashboard/contacts/put
// Note : Marital Status
// Note : confirmation 
// Note : Custum fields (Add Button) click to add fields 
// note : delete button after submit
constructor(props) {
    super(props);
    // For Maritial Status
    this.state = {
        selectedItem: undefined,
        selected1: 'key1',
        results: {
            items: []
        },
        customerTitle: [],
        customerValue: [],
        toggled: true
    }
}
//  Marital status Change valice
onValueChange(value: string) {
    this.setState({
        selected1: value
    });
}

go(key: string) {
    this.props.navigation.navigate(key);
}

//start code of adding dynamically custome fields
addTextInput = (key) => {
    console.log('key 1 --', key);
    let customerTitle = this.state.customerTitle;
    customerTitle.push(<View key={key}><Field key={key} label="Customer Field Title" defaultValue="Customer Title" />
        <Field label="Value" key={key} defaultValue="Field value" /></View>);
    this.setState({ customerTitle })
}

toggleSwitch1 = () => {
    let switchValue = !this.state.toggled;
    this.setState({ toggled: switchValue })
    console.log(' this.state.toggled -', this.state.toggled);
}
//end

render(): React.Node {
    return <BaseContainer title="Contact" navigation={this.props.navigation} scrollable>
        <View style={[Styles.center, style.header]}>
            <H1>Add New Contact</H1>
        </View>

        {/* <Switch
            onValueChange={props.toggleSwitch2}
            value={props.switch2Value} /> */}
        <List>
            <ListItem itemDivider>
                <Text>Personal Information</Text>
            </ListItem>
            <Field
                label="First name"
                defaultValue="Type first name here"
                textInputRef={this.setFirstnameRef}
                onSubmitEditing={this.goToSurname}
                returnKeyType="next"
            />
            <Field
                label="Surname"
                defaultValue="Type last name here"
                textInputRef={this.setSurnameRef}
                onSubmitEditing={this.goToOccupation}
                returnKeyType="next"
            />
            <Field
                label="Occupation"
                defaultValue="Occupation"
                textInputRef={this.setOccupationRef}
                onSubmitEditing={this.goToPhone}
                returnKeyType="next"
            />
            <Field
                label="Phone Number"
                defaultValue="0123-123456789"
                textInputRef={this.setPhoneRef}
                onSubmitEditing={this.goToEmail}
                returnKeyType="next"
            />
            <Field
                label="Email"
                defaultValue="email@gmail.com"
                textInputRef={this.setEmailRef}
                onSubmitEditing={this.goToAge}
                returnKeyType="next"
            />
            <Field
                label="Age"
                defaultValue="25"
                textInputRef={this.setAgeRef}
                onSubmitEditing={this.goToStatus}
                returnKeyType="next"
            />
            <Picker
                mode='dropdown'
                selectedValue={this.state.selected1}
                onValueChange={this.onValueChange.bind(this)}>
                <Item label='Marital Status' value='' />
                <Item label='Single' value='Single' />
                <Item label='Married' value='Married' />
                <Item label='Separated' value='Separated' />
                <Item label='Divorced' value='Divorced' />
                <Item label='Civil Partnership' value='Civil Partnership' />
                <Item label='Widowed' value='Widowed' />
            </Picker>
            <Field
                label="Address"
                defaultValue="Address"
                textInputRef={this.setAddressRef}
                onSubmitEditing={this.goToImg_url}
                returnKeyType="next"
            />
            <ListItem itemDivider>
                <Text>Image</Text>
            </ListItem>
            <Field
                label="Image"
                defaultValue="Image"
                textInputRef={this.setImg_urlRef}
                onSubmitEditing={this.goToTags}
                returnKeyType="next"
                secureTextEntry
            />
            <ListItem itemDivider>
                <Text>Tags</Text>
            </ListItem>
            <Picker
                mode='dropdown'
                selectedValue={this.state.selected1}
                onValueChange={this.onValueChange.bind(this)}>
                <Item label='stage 1' value='stage 1' />
                <Item label='stage 2' value='stage 2' />
            </Picker>
            <ListItem itemDivider>
                <Text>Confirmation</Text>
            </ListItem>
            <CheckBox checked={false} />
            <Text>This person gave me permission to contact them This person will not receive a confirmation email from Pamtree as you are
            adding this recipient manually so be sure you have permission to contact them first.</Text>

            <ListItem itemDivider>
                <Text>Custom Fields</Text>
            </ListItem>
            <View>
                {this.state.customerTitle.map((value, index) => {
                    return value
                })}
                <Button primary Small onPress={() => this.addTextInput(this.state.customerTitle.length)}>
                    <Text>Add</Text>
                </Button>
            </View>
            <ListItem itemDivider>
                <Text>Other Information</Text>
            </ListItem>
            <View>
                <Text>Drives ?</Text>
                <Switch
                    onValueChange={() => this.toggleSwitch1()}
                    value={this.state.toggled}
                />
            </View>
            <Field
                label="Objective"
                textInputRef={this.setDrivesRef}
                onSubmitEditing={this.goToObjective}
                returnKeyType="next"
            />

            <ListItem itemDivider>
                <Text>Notes</Text>
            </ListItem>
            <Field
                label="Notes"
                defaultValue="Notes"
                textInputRef={this.setNotesRef}
                onSubmitEditing={this.submit}
                returnKeyType="go"
                last
            />
            <Button primary full>
                <Text> Submit </Text>
            </Button>
        </List>
        <Container>
            <Content>
                {/* {this.state.customerTitle.map((value, index) => {
                    return value
                })} */}
            </Content>
        </Container>
    </BaseContainer>;
}

}

const style = StyleSheet.create({
header: {
backgroundColor: variables.lightGray
},
icon: {
color: variables.brandInfo,
fontSize: 30
},
avatars: {
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
},
avatar: {
marginRight: variables.contentPadding / 2
}
});
`

[mikeduminy]

This is a problem again due to components/GroupTabs importing @storybook/components and components/types/Date/index imports and references insert-css. Commenting these out makes it work.

[krishna4157]

I'm not sure what the best solution is but it probably involves separating the "UI" exports from addon-links from the "functionality" exports. @Hypnosphi, what do you think?

can u explain in detailed?