expected a string (for built-in components) or a class/function (for composite components) but got undefined

Question

My Code as it is, I don't know where my error

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, 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.

app.js

import React, { Component } from 'react';
import {
  Navigator,
} from 'react-native';
import Movies from './Movies';

const RouteMapper = (route, navigator) => {
  if (route.name === 'movies') {
    return <Movies navigator={navigator} />;
  }
};

export default class App extends Component {
  render() {
    return (
      <Navigator
        // Default to movies route
        initialRoute={{ name: 'movies' }}
        // Use FloatFromBottom transition between screens
        configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromBottom}
        // Pass a route mapper functions
        renderScene={RouteMapper}
      />
    );
  }
}

Movies.js

import React, { Component } from 'react';
import {
  ScrollView,
  Text,
  View
} from 'react-native';
import { movies } from './data';

export default class Movies extends Component {
  render() {
    return (
      <View>
        <ScrollView>
          {movies.map((movie, index) => <Text>{movie.title}</Text>)}
        </ScrollView>
      </View>
    );
  }
}

"You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports." — Nicolai Mons Mogensen

calebpitan calebpitan · Accepted Answer · 2020-07-28T12:00:45

You likely forgot to return jsx or a value other than undefined which is the default return of every function in JavaScript.

By my guess (since I don't know what is in other components) the error is from RouteMapper which does a conditional return without a default return for if condition fails. You might want to return null as the default return of this component.

If this doesn't fix trace the rendered components and check if they all have a return statement that is not either implicitly or explicitly undefined

expected a string (for built-in components) or a class/function (for composite components) but got undefined

1 Answers