[React] 에러 : Element type is invalid: ... forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. (+스타일컴포넌트 네이밍 실수)

 

❌  React  - Error

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

 

알아보니 

-  router component로 설정해놓은 page 컴포넌트가 export 없이 비어있어서

-  import한 컴포넌트의 네이밍 문제로

. . 등으로 발생하는 에러라고 한다. 

 

내 경우도 위와 비슷하게 컴포넌트 네이밍 문제였다.

스타일컴포넌트 분리를 착각해서, 외부 (스타일컴포넌트 export한 파일) 에서 import 한 것으로 스타일컴포넌트명을 써줘서 문제가 발생했다.

 

 

---

📜  In Detail

 

컴포넌트 분리 과정에서 실수로 생긴 .. 에러! ㅠㅠ

내가 코드를 짠 게 아닌 컴포넌트를 분리하다 보니 문제를 더 찾기 힘들었다.

컴포넌트 분리 중 발생한 에러라서, 큰 문제가 아니라 - 내가 실수하거나 놓친 부분을 찾으면 될 거라고 생각했다.

그런데 생각보다 이유를 찾기 힘들었다 ..

import 나 export 등도 잘 살펴보고,   스타일 컴포넌트를 따로 분리한 것과도 연관있는 듯해 잘 살펴봤지만 못 찾다가..

 

역시 스타일 컴포넌트 분리와 연관있는 문제였다 ㅠㅠ

 

스타일 컴포넌트를 따로 분리해 

import * as St from './styles/MyPageStyle';

이런 식으로 import 해서 쓰고 있었는데,  당연히 모든 네이밍?된 태그들이 스타일컴포넌트 태그이름이라고 생각하고 

St. 를 붙여주었다. 근데 알고보니 해당 컴포넌트 맨 아래에 분리되지 않은 스타일 컴포넌트가 있었고, 

St. 라는 이름을 떼주니까 작동했다.  (버튼 을 눌렀을 때 에러가 발생했었으니.. 해당 버튼 태그를 유심히 보는게 맞았다) 

 

위와 같이, 어떤 태그는 import 한 스타일컴포넌트라  St. 가 붙고, 

어떤 태그들은 동일 컴포넌트 내 스타일 컴포넌트를 사용해 (분리 x)

St. 를 붙이면 안되는데 붙여버린 실수 .. 로 발생한 에러였다.

 

---

🪄 Ways to Improve

 

담에는

스타일컴포넌트 분리 시,  분리되지 않은 건 없는 지 잘 체크하기!

 

또, 컴포넌트 분리하면서 스타일컴포넌트 분리까지 한꺼번에 하다가 실수나기 쉬우니, 하나씩 하자. 

컴포넌트 분리 먼저 하고, 스타일 컴포넌트 분리하기로 ..