(해결) Uncaught TypeError - Super expression must either be null or a function

순환 의존성 때문에 일어나는 에러 해결하기

2022-03-28에 씀

아래는 에러를 재현한 codesandbox이다.

에러

1Uncaught TypeError: Super expression must either be null or a function

원인

위 코드샌드박스의 코드는 아래와 같은 구조로 되어 있다.

  1. SubClassFirstClass를 다른 파일에서 선언
  2. SubClassFirstClass를 상속하면서, FirstClass를 import
  3. FirstClass가 선언된 파일에 SubClass를 import

이때 SubClass 파일과 FirstClass 파일이 서로를 import 하며 순환 의존성이 생기며 서로를 계속 호출하게 된다.

해결

  1. SubClassFirstClass가 있는 파일에 선언한다.
  2. FirstClass 파일에선 SubClass를 사용하지 않는다.

순환 의존에 대한 더 자세한 이야기는 --> 참고


이 포스트의 상황에 해당되지 않고 React.js의 Class Component를 사용하고 있다면

1class MyComponent extends React.component

처럼 component의 c를 소문자로 적었을 때 같은 에러가 발생하기도 하는 것 같다. React.Component와 같이 첫 글자를 대문자로 수정해야 한다.

프로필 사진

조예진

이전 포스트
JS12 - 에러 처리 / 모듈 / 바벨 & 웹팩
다음 포스트
객체지향 프로그래밍이란? - <객체지향의 사실과 오해>