문제 상황

평소 UI 컴포넌트를 작성할 때 ComponentProps를 통해 확장성을 재고하는 편인데, ref의 전달이 필요한 경우가 생겨 forwardRef를 이용했다.

문제가 되는 부분은 아래와 같다.

interface Props extends ComponentProps<"div"> {
  ...
}

const Item = forwardRef<HTMLDivElement, Props>(
  (
    { ..., ...props },
    ref
  ) => {
    return (
      <div className={styles["item-wrapper"]} ref={ref} {...props}>
        ...
      </div>
    );
  }
);

export default Item;

일반적으로 작동이 잘 되는 코드이다. 실제로 로컬에서 실행할 때에도 문제가 없고, build 명령어를 통해 빌드할 때에도 문제가 되지 않는다.
하지만 해당 프로젝트는 AWS Amplify에서 빌드하는데, 그 과정에서 에러가 발생하였다.

에러 문구

15:14 Error: Component definition is missing display name react/display-name

내가 여태 알기로는 export default를 통해 컴포넌트를 내보내면 display name이 자동으로 설정된다고 알고 있었기에... Amplify 내부 캐시 문제라고 생각하며 30분정도 삽질을 했다.

왜?

해당 에러는 TS를 이용하지 않으면 나오지 않는 에러라고 한다.
forwardRef를 호출해서 익명 함수를 넘기면 브라우저에서 해당 컴포넌트의 이름을 알 수 없기 때문에 뱉는 에러라고 한다.

해결

간단하게, 해당 컴포넌트의 display name을 임의로 지정하면 해결된다.

...

export default Item;
Item.displayName = "Item";