0

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>
);
Brann
  • 31,689
  • 32
  • 113
  • 162
  • Did you try [this](https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string)? Same symptoms. And it leads to [this](https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import/36796281#36796281) – bigless Jan 26 '18 at 21:49
  • Yes I did, and mentioned it in the very first sentence of my question! Thanks anyway! – Brann Jan 27 '18 at 06:49

2 Answers2

3

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

Rob Walker
  • 877
  • 7
  • 13
  • You're right, it works. Thanks a lot. That being said, App is already a function that returns a Provider component (ie export const App= () =>( .... So I don't understand why your suggestion works, but it certainly does ! – Brann Jan 27 '18 at 06:46
0

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!

Денищук Павло Миколайович
  • 198
  • 2
  • 4