Expo build:web Failed to compile with error "Cannot read property 'name' of undefined at Array.reduce"

[heindiez]

I am having an error when building web on my project.

This is the screenshot of the error message:

this is the package.json

{
  "main": "index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start",
    "test": "jest",
  },
  "dependencies": {
    "@expo/webpack-config": "^0.12.63",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/picker": "^1.8.1",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "@react-navigation/web": "^1.0.0-alpha.9",
    "axios": "^0.21.1",
    "expo": "~40.0.0",
    "expo-constants": "~9.3.3",
    "expo-splash-screen": "^0.10.0",
    "expo-status-bar": "~1.0.3",
    "expo-updates": "~0.4.0",
    "jwt-decode": "^3.1.2",
    "moment": "^2.29.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "^0.64.0",
    "react-native-calendar-picker": "^7.1.1",
    "react-native-dropdown-picker": "^4.0.2",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-paper": "^4.7.2",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.2",
    "react-native-svg": "12.1.0",
    "react-native-unimodules": "^0.13.0",
    "react-native-web": "^0.15.0",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-react-session": "^2.6.1"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "babel-jest": "~25.2.6",
    "jest": "~25.2.6",
    "react-test-renderer": "~16.13.1"
  },
  "jest": {
    "preset": "react-native"
  },
  "private": true
}

I need a posible answer on to why this is happening.

[heindiez]

SOLVED!

So after days of debugging, sleepless nights, and hair loss. I finally found the culprit.
It was how I implemented and declared imports from React Native and React Native Paper lazy style.

I imported them as an Object like this:

and used them like this:

<ReactNative.View style={styles.container}>
                <ReactNativePaper.Appbar.Header>
                    <ReactNativePaper.Appbar.Content title="Property Management" />
                    <ReactNativePaper.Button style={styles.buttonHeader} icon="information-variant" mode="contained" onPress={() => console.log('Pressed')}>
                        Property Details
                    </ReactNativePaper.Button>
                    <ReactNativePaper.Button style={styles.buttonHeader} icon="city" mode="contained" onPress={() => this.props.navigation.navigate("Plan")}>
                        Unit Plan
                    </ReactNativePaper.Button>
                    <ReactNativePaper.Button style={styles.buttonHeader} icon="plus-thick" mode="contained" onPress={this.onShowModalFloor}>
                        Add Property
                    </ReactNativePaper.Button>
                </ReactNativePaper.Appbar.Header>
                <ReactNativePaper.DataTable>
                    <ReactNativePaper.DataTable.Header>
                        <ReactNativePaper.DataTable.Title style={[styles.right, styles.tiles]}><b>Abbreviation</b></ReactNativePaper.DataTable.Title>
                        <ReactNativePaper.DataTable.Title style={styles.tiles}>Property Name</ReactNativePaper.DataTable.Title>
                        <ReactNativePaper.DataTable.Title style={styles.tiles}>Added on</ReactNativePaper.DataTable.Title>
                        <ReactNativePaper.DataTable.Title style={styles.center}>Action</ReactNativePaper.DataTable.Title>
                    </ReactNativePaper.DataTable.Header>
                    {
                        dataSource.map((element, index) => {
                            return <ReactNativePaper.DataTable.Row key={`row-${index}`} style={styles.row}>
                                <ReactNativePaper.DataTable.Cell style={[styles.right, styles.tiles]}><b>{element.short_name}</b></ReactNativePaper.DataTable.Cell>
                                <ReactNativePaper.DataTable.Cell style={styles.tiles}>{element.name}</ReactNativePaper.DataTable.Cell>
                                <ReactNativePaper.DataTable.Cell style={styles.tiles}>{element.added_on}</ReactNativePaper.DataTable.Cell>
                                <ReactNativePaper.DataTable.Cell style={styles.center}>
                                    <ReactNativePaper.ToggleButton icon="city" value="info" onPress={() => { navigation.navigate("Units"); }} />
                                    <ReactNativePaper.ToggleButton icon="pencil" value="info" onPress={() => { }} />
                                    <ReactNativePaper.ToggleButton icon="trash-can" value="info" onPress={() => { }} />
                                </ReactNativePaper.DataTable.Cell>
                            </ReactNativePaper.DataTable.Row>
                        })
                    }
                    <ReactNativePaper.DataTable.Pagination
                        page={page_no}
                        numberOfPages={Math.floor(total / itemsPerPage)}
                        onPageChange={page_no => setpage_no(page_no)}
                    // label={`${from + 1}-${to} of ${total}`}
                    />
                </ReactNativePaper.DataTable>
                <FloorModal modalVisible={modalFloorVisible} onDismiss={this.onCloseModalFloor} />
            </ReactNative.View>

I had to rewrite my code but it was all worth it.