[에러 해결] Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

 

 

 

이번 글에서는 아래 에러에 대해서 다루어 보겠습니다.

Uncaught 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.

 

 

[에러 원인]

위 에러 메시지는 React 컴포넌트의 타입이 잘못되었음을 의미합니다. 즉, React는 문자열(내장 컴포넌트)이나 클래스/함수(사용자 정의 컴포넌트) 대신 undefined를 받았다는 것입니다. 이 오류는 주로 컴포넌트나 함수를 잘못된 방식으로 가져오거나 내보낼 때 발생합니다.

 

이 에러 원인은 단순합니다. 주로 Export와 Import 방식의 혼동으로 인해 발생합니다.

아래와 같은 컴포넌트가 있다고 가정해보겠습니다.

const MyComponent = () => {
  return <div>My Component</div>;
};
export default MyComponent;

 

위의 컴포넌트를 Import하여 사용하려면 아래와 같이 사용해야하지만,

import MyComponent from './MyComponent';

 

아래 코드처럼 사용해서 저의 경우 에러가 발생하였습니다.

import { MyComponent } from './MyComponent';

 

 

 

[해결 방법]

default export와 named export를 올바르게 사용하면 됩니다.

1. export default

 

const MyComponent = () => {
  return <div>My Component</div>;
};
export default MyComponent;

import MyComponent from './MyComponent';

 

2. export named...

const MyComponent = () => {
  return <div>My Component</div>;
};
export default MyComponent;

import { MyComponent } from './MyComponent';