Invariant Violation: Element type is invalid: expected a string or a class/function but got: object

Question

I'm aware of this question but it seems my problem is different (ie I don't think its an improperly destructured import)

This is the error I get. The files mentioned are deep in the react-native library, and unfortunately the message is not very informative.

ExceptionsManager.js:73 Check your code at renderApplication.js:35.

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. ExceptionsManager.js:65

This error is located at:

 in RCTView (at View.js:71) in View (at AppContainer.js:102) in RCTView (at View.js:71) in View (at AppContainer.js:122) in AppContainer (at renderApplication.js:34) 

The index.js below gives me the error, but if I display directly my component by using the commented line instead to register, everything works as expected.

index.js:

import { AppRegistry } from 'react-native';
import {App} from './src/App';
import {Test} from './src/App';
//AppRegistry.registerComponent('MyApp', () => Test);
AppRegistry.registerComponent('MyApp', App);

./src/App.js:

import React, { Component } from 'react';
import {Provider} from 'react-redux';
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import { createLogger } from 'redux-logger'
import reducer from './reducers/index'
import AppContainer from './containers/AppContainer'
import {  Text,  View} from 'react-native';

const loggerMiddleware = createLogger({predicate: (getstate, action) => __DEV__});

function ConfigureStore(initialState){
   const enhancer = compose(
     applyMiddleware(loggerMiddleware)
   );

   return createStore(reducer,initialState, enhancer);
  }

const store = ConfigureStore({});

export class Test extends Component<{}> {
  render() {
    return (
      <View >
        <Text >
         xxx
         </Text>
      </View>
    );
  }
}

export const App= () =>(
  <Provider store={store}>
    <Test/>
  </Provider>
);

Answer 1

Changing your code to the following works correctly.

AppRegistry.registerComponent('MyApp', () => App);

registerComponent seems to expect a function that returns a component or stateless component, rather than contents of the component (JSX).

Answer 2

It's import problem. When I used: in cart.js const CartItem = require("./cart-item"); in cart-item.js export default CartItem I did have this problem, but when I change import: in cart.js import CartItem from "../cart/cart-item"; all works fine!