Element type is invalid: expected string or a class/function but got undefined

Question

The rest of the error messages says "you likely forgot to export your component from the file it's defined in or you might have mixed up default and named imports.

This is my Camera.js file:

import React from 'react';
import {CameraKitCameraScreen, CameraType} from 'react-native-camera-kit';
import {SafeAreaView, StyleSheet, Text, View, Platform, TouchableHighlight } from 'react-native'
export class Camera extends React.Component {
 render() {
   return (
    <SafeAreaView style={{flex: 1}}>
        <View style={{flex: 1}}>
    <CameraKitCameraScreen
        ref={ref => {
        this.camera = ref;
      }}
      actions={{
        rightButtonText: 'Done',
        leftButtonText: 'Cancel'
        }}

      cameraType={CameraType.Back}
      captureAudio={false}
      Options={{
        title: 'Permission to use camera',
        message: 'We need your permission to use your camera',
        buttonPositive: 'Ok',
        buttonNegative: 'Cancel',
      }}
         />
        </View>
        <View style={styles.container}>
        </View>
     </SafeAreaView>
  );
};
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    padding: 10,
    alignItems: 'center',
  },
  titleText: {
    fontSize: 22,
    textAlign: 'center',
    fontWeight: 'bold',
  },
  textStyle: {
    color: 'black',
    fontSize: 16,
    textAlign: 'center',
    padding: 10,
    marginTop: 16,
  },
  buttonStyle: {
    fontSize: 16,
    color: 'white',
    backgroundColor: 'green',
    padding: 5,
    marginTop: 32,
    minWidth: 250,
  },
  buttonTextStyle: {
    padding: 5,
    color: 'white',
    textAlign: 'center',
  },
});

And this is where I am accessing it in my App.js:

import * as React from 'react';
import { Button, SafeAreaView, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { enableScreens } from 'react-native-screens';
import { gyroscope, accelerometer } from "react-native-sensors";
import Camera from './components/Camera';

function HomeScreen({ navigation }) {
enableScreens();
  return (
    <SafeAreaView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
        <Button
        title="Inclinometer"
        onPress={() => navigation.navigate('Inclinometer')}
      />
    </SafeAreaView>
  );
}

function InclinometerScreen({ navigation }) {
enableScreens();
  return (
    <SafeAreaView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Inclinometer</Text>
        <Camera/>
    </SafeAreaView>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Weather' }} />
        <Stack.Screen name="Inclinometer" component={InclinometerScreen} options={{ title: 'Inclinometer',
            message: 'We need your permission to use your camera',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel', }}  />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

I think I am correctly exporting my Camera.js however I think I might have some weird syntax error with whether the file is the correct component or not.

Answer 1

Camera is a named export (rather than a default) so it needs to be imported as

import { Camera } from './components/Camera';