Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. React

Question

Error:

"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App ."

index.js

 import { registerRootComponent } from 'expo'; import App from './App'; // registerRootComponent calls AppRegistry.registerComponent('main', () => App); // It also ensures that whether you load the app in the Expo client or in a native build, // the environment is set up appropriately registerRootComponent(App);

App.js

 import React, { Component } from 'react'; import { NavigationCointainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import Favoritos from './Favoritos'; import InfoGeneral from './InfoGeneral'; import Principal from './Principal'; const Stack = createStackNavigator(); export default class App extends Component { render(){ return( <NavigationCointainer> <Stack.Navigator initialRouteName='Principal'> <Stack.Screen name='Principal' component={Principal}/> <Stack.Screen name='InfoGeneral' component={InfoGeneral}/> <Stack.Screen name='Favoritos' component={Favoritos}/> </Stack.Navigator> </NavigationCointainer> ); }; }

Answer 1

This is a very common error, it means you are trying to render undefined as a component. This usually happens in circumstances like this:

MyComponent.js:

function MyComponent() {
   return <View />;
}

App.js

import { MyComponent } from './MyComponent';

export default function App() {
  return <MyComponent />;
}

Can you spot what is missing? It's export from MyComponent.js . In App.js, MyComponent is undefined because there is no such export. To fix it, you would do this:

MyComponent.js:

export function MyComponent() {
   return <View />;
}

Answer 2

I had this error when I tried to get rid of warnings about PascalCase .

The warning:

Imported JSX component text must be in PascalCase or SCREAMING_SNAKE_CASE react/jsx-pascal-case

I changed all components in my React Redux Form from Control.text, Control.select, Control.textarea to Control.Text, Control.Select, Control.TextArea and started getting this error.

I changed

<Control.Text />
<Control.Select />
<Control.TextArea />

back to

<Control.text />
<Control.select />
<Control.textarea />

and the error was gone.