[emotion] You may have forgotten to import it. 에러 해결하기

[emotion] You may have forgotten to import it. 에러 해결하기

React에서 styled-component나 emotion으로 개발할 때 아래 에러가 나타날 수 있습니다.
해결 방법은 styled-component github issue에서 찾았습니다.

Error: You are trying to create a styled element with an undefined component.
You may have forgotten to import it.

github issue로 보아 styled-component는 아래 에러가 표시되는 것 같습니다.

Uncaught Error: Cannot create styled-component for component: undefined

 

문제점

기존 코드는 아래와 같습니다.

const StyledIcon = styled(Icon)(() => ({
  paddingRight: 4,
}));

사실 코드는 문제가 없습니다.

정확하지는 않지만 제가 추측하기로는 파일 로드 순서에 영향을 받는 것 같습니다.
tsx 파일이 로드될 때 StyledIcon 컴포넌트가 로드되는 시점이 Icon 컴포넌트가 로드되는 시점보다 더 빠른 것입니다.

다시 말하면 Icon이 없는데 Icon을 사용하는 것입니다.

위 의견은 제 단순한 추측이고 실제로는 간단한 버그일 수도 있습니다.

해결

const StyledIcon = styled((props: any) => <Icon {...props} />)(() => ({
  paddingRight: 4,
}));

위처럼 props를 넘겨주는 방식으로 하면 간단하게 해결이 됩니다.

참고문헌

• github issue