Element type is invalid: expected a string (for built-in components)

[sepehrooo]

Hi I know I should post this on react-native-meteor repository for inProgress team. But no one responded there. Any help would be much appreciated.

I have 3 files. an index.js an Items.js and an ItemsContainer.js.
I keep getting this error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of Items
The problem is with "< MeteorListView / >" in Items.js if I remove it the error goes away :(

Please help me resolve this issue.

index.js:

`import Items from './Items';
import ItemsContainer from './ItemsContainer';

export {Items};
export default ItemsContainer;`

ItemsContainer.js:

`import React, { Component } from 'react';
import Meteor, { createContainer } from 'react-native-meteor';
import { StyleSheet, View, Text } from 'react-native';
import Items from './Items';

class ItemsContainer extends Component {

constructor(props) {
super(props);
}

render() {
const { itemsReady } = this.props;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

return (!itemsReady
  ? <Text>Loading...</Text>
  :<View style={styles.container}>
      <Items />
  </View>
);

}
}

// ItemsContainer.propTypes = {
// user: React.PropTypes.object,
// };

export default createContainer(() => {
const handle1 = Meteor.subscribe('items');
return {
itemsReady: handle1.ready(),
};
}, ItemsContainer);

And Items.js:

`import React, {Component} from 'react';
import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';
import Meteor, {MeteorListView, MeteorComplexListView} from 'react-native-meteor';
import {COLORS, GRID_SETTINGS} from '../../styles';

class Items extends Component {
constructor(props) {
super(props);
this.state = {
itemId: '',
subitem: {}
};
}
render() {
return (
< View style={styles.container} >
< View style={styles.items} >
< MeteorListView collection="items" renderRow={() => this.renderItem(item)} / >
< /View >
< View style={styles.subitems} >
< /View >
< View style={styles.itemView} >
< /View >
< /View >
);
}
renderItem(item) {
return (
{item.text}
);
}
renderSubitem(subitem) {
return (
< Text>{subitem.text}< /Text>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row'
},
items: {
flex: 2,
backgroundColor: 'gray'
},
content: {
flexDirection: 'row',
flex: 10
},
subitems: {
flex: 2,
backgroundColor: 'red'
},
itemView: {
flex: 8,
backgroundColor: 'green'
}
});

export default Items;`

[spencercarli]

Upon first glance I'm wondering if having the space before the component name is causing an issue? < MeteorListView collection="items" renderRow={() => this.renderItem(item)} / > should be <MeteorListView collection="items" renderRow={() => this.renderItem(item)} / > - I'm not sure if the former is valid JSX

[spencercarli]

Going to close this for lack of response and since there is a functioning example in the repo now.