👨‍💻 사건

분명 컴포넌트를 만들때, 타입지정을 해주었다.
그런데, app.tsx 파일에서 테스트를 위해 불러오는 과정에서 이상한 점을 느꼈다.
props 로 size 와 state 를 지정해주어야 하지만, 안해줘도 IDE 에서 빨간 물결(에러표시)이 표시가 되지않았다.
실제 렌더를 해보면,

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

이렇게 에러메시지가 잘나온다.
그래서 무엇이 문제인지 또 하나하나 모든 방안을 시도해보았다.

1. props 로 들어가는 타입들을 하나하나 따로 지정을 해두어 보았다.
2. 실제 태그에 존재하는 속성들이 있어서 씹힐수있기때문에 타입 명을 바꿔서 시도해 보았다.
3. export 할때, default 로 설정해서 해보았다.

이외 여러 방안을 시도해보았으나, 해결되지 못하였다.

✅ 해결

import 해오는 모든 경로를 baseURL 설정해둔것으로 하지않고, 실제 경로를 다 적어 주었다.
그렇게 하였더니, 오류메시지가 제대로 출력되는것을 확인할수 있었다!!

자, 그럼 이제 이것은 해결했으나, 왜 baseURL 로 하였을때는 컴파일이 제대로 이루어 지지않는지 확인하고자 컨피그 파일들을 찾아보았다.

그러다가 문뜩, npm 에 배포를 위해 include 속성을 lib 폴더로만 해둔 기억이 생각났다!!

그래서 바로 include 속성을

"include": ["./src/**/*.tsx", "./src/**/*.ts", "vite.config.ts"],

로 변경해두니, baseURL 을 사용해도 정상적으로 작동되는것을 확인할수있었다.

💭 개선

• 항상 이런 작은 실수로 인해, 시간을 허비하는 일이 종종 있는것같다. 물론 나중에는 도움이 되는 일이지만, 현재 프로젝트를 정해진 일정대로 움직이기 위해서는 신중할 필요가 있어보인다.