I have project in react which was recently rewritten to typescript. Now, after modifications, when I want to add one component I recived an error:

"Warning: React.createElement: 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."

This is my index.tsx

import React from "react";
import { Text, Alert } from "react-native";
import Screen from "../../components/Screen";
import FormField from "../../components/InputText";
import { Formik as FormComponent } from "formik";
import SubmitButton from "../../components/buttons/SubmitButton";

import ImagePicker  from "../../components/forms/ImagePickerForm";



const AddItem = () => {
  return (
    <ScrollView>
      <Screen>
        <ImagePicker />

        <FormComponent
          initialValues={{ title: "", description: "", category: "", images: [] }}
          onSubmit={(values) => Alert.alert("Correct!")} //{(values) => console.log(values)}
          validationSchema={validationSchema}
        >
          {({ handleChange, errors }) => (
            <>

              {/*<Text>{errors.category}</Text>*/}

              <FormField
                name="title"
                placeholder="title"
                onChangeText={handleChange("title")}
                style={{ width: "100%", flex: 1 }}
                maxLength={70}
                multiline
                width={100}
              ></FormField>

              <Text>{errors.title}</Text>

          

              <SubmitButton title="Add item" />
            </>
          )}
        </FormComponent>
      </Screen>
    </ScrollView>
  );
};



export default AddItem;

And this is component which Im trying to add to my index.tsx as <ImagePicker/>

import React, { useState } from "react";
import * as ImagePicker from 'expo-image-picker';

import ImageInput from "../ImageInput";


const PickImage: React.FC<{}> = () => {
  const [imageUri, setImageUri] = useState();

  const selectImage = async () => {
    try {
      const result: any = await ImagePicker.launchImageLibraryAsync();
      if (!result.cancelled) setImageUri(result.uri);
    } catch (error) {
      console.log("something went wrong");
    }
  };
  return <ImageInput imageUri={imageUri} onChangeImage={(uri) => setImageUri(uri)} />;
}

export default ImagePicker;

Any idea why I recived an error? I will be greatfull for help with this issue

CodePudding user response：

You are exporting by default ImagePicker instead of PickImage

CodePudding user response：

When you're exporting ImagePicker, it's using ImagePicker from "expo-image-picker". You need to export default PickImage.