[React] Error: Element type is invalid 오류 해결방법

 

이 오류 메세지는 리액트에서 정상적으로 내보내지 않은 컴포넌트를 렌더링하려고 할 때 발생합니다.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 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 `ListScreen`.

 

오류가 발생한 코드는 다음과 같습니다.

ListScreen.js에서 InputFAB라는 컴포넌트를 불러와 사용하도록 구현한 것입니다.

import { View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import EmptyList from '../components/EmptyList';
import List from '../components/List';
import InputFAB from '../components/InputFAB';

const ListScreen = () => {
  const { bottom } = useSafeAreaInsets();
  const todos = [];
  return (
    <View style={{ flex: 1, paddingBottom: bottom }}>
      {todos.length ? <List data={todos} /> : <EmptyList />}
      <InputFAB />
    </View>
  );
};

export default ListScreen;

 

해결방법

리액트에서 정상적으로 내보내지 않은 컴포넌트를 렌더링하려고 할 때 오류가 발생할 수 있다하니 InputFAB.js를 확인해봅니다. 컴포넌트를 만들고 export 즉 내보내는 라인을 작성하지 않았던 것이 원인이었습니다.

 

InputFAB.js 파일 마지막 라인에 아래와 같이 코드를 추가하니 오류가 해결되었습니다. 추가로 컴포넌트를 내보내는 라인에 오타가 있는게 아닌지도 확인해보시기 바랍니다.

export default InputFAB;