Exported variable has or is using name from external module but cannot be named 에러

타입스크립트로 컴파일을 하다가, styled css 쪽에서 에러가 났습니다.

 

Item은 EffectedItem을 상속받고 있는데,

export const Item = styled(EffectedItem)`
  text-align: center;
`;

 

EffectedItem의 props의 타입이 export 되지 않아 생긴 에러였습니다.

import { useTheme } from "@emotion/react";
import { forwardRef, useCallback } from "react";
import {
  ListItemDefaultProps,
  ListItemForwardedRef,
} from "../../../types/props";
import { rippleEffect } from "../../../utilities/css";
import { ItemBase } from "../../base/ItemBase";

interface EffectedItemProps extends ListItemDefaultProps {
  active: boolean;
}

const EffectedItem = forwardRef(
  (props: EffectedItemProps, forwardedRef: ListItemForwardedRef) => {
    const theme = useTheme();
    const { onClick = () => {} } = props;

    const handleClick = useCallback(
      (event: any) => {
        rippleEffect(event, theme, true);
        onClick(event);
      },
      [onClick]
    );

    return <ItemBase {...props} ref={forwardedRef} onClick={handleClick} />;
  }
);

export default EffectedItem;

 

export를 붙여주면 에러가 사라집니다.

export interface EffectedItemProps extends ListItemDefaultProps {
  active: boolean;
}

 

참고 https://github.com/styled-components/styled-components/issues/1063

Typescript 2.4 Error: Variable StyledComponentClass from external module cannot be named. · Issue #1063 · styled-components/st