[타입스크립트] Type error: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.

2025.03.12 - [👩🏻‍💻 dev] - 🍬 React import 시 Wrapper 패턴 활용해 보기

🍬 React import 시 Wrapper 패턴 활용해보기

 

 

이전 import 시 wrapper 패턴을 활용해서 봤다.

근데 다음과 같은 타입 에러가 발생했다.

// Type error: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.

export { classNames, Motion, MotionProps };

 

이전 MotionProps를 살펴보면 다음과 같다.

import { AnimationProps, motion, MotionStyle, SVGMotionProps, Variant, Variants } from 'framer-motion';

// 중략

export interface MotionProps {
  variants: Variants;
  animationProps: AnimationProps;
  motionStyle: MotionStyle;
  svgProps: SVGMotionProps<SVGPathElement>;
}

🔎 문제 원인 탐색

"isolatedModules"를 프로젝트에서 찾아보니, 컴파일러 옵션으로 true를 설정하면, 모호한 값/타입을 import할 경우 에러를 낸다. (isolateModules 설정 이유와 에러가 발생하는 이유에 대해서는 나중에 다뤄보고자 한다.)

 

isolatedModules는 타입스크립트 3.8 이후에는 type-only import과 export 새로운 문법을 제공한다.

다음과 같이 import type은 타입 annotation과 declaration로 쓰일 declaration만 import한다는 것이다.

즉, 런타임 시에는 완전히 제거가 되어 흔적이 없어진다. 마찬가지로 export type은 타입 콘텍스트에만 쓰일 export만 제공하기 때문에 타입스크립트의 output에 완전히 제거된다는 것이다.

import type { SomeThing } from "./some-module.js";
export type { SomeThing };

 

중요한 것은 클래스의 경우 런타임에 값이 있고, 디자인 타임에 타입이 있고, 콘텍스트에 따라 쓰임이 달라진다는 것이다.

import type을 활용해 클래스를 import를 할 경우, extend과 같은 기능을 활용할 수 없게 된다.

import type { Component } from "react";
interface ButtonProps {
  // ...
}
class Button extends Component<ButtonProps> {
  //               ~~~~~~~~~
  // error! 'Component' only refers to a type, but is being used as a value here.
  // ⚠️(Component)는 타입을 가리키지만 값으로 쓰이고 있습니다.
  // ...
}

 

 

Flow를 사용해 본 경험이 있다면 해당 문법이 익숙할 것이다.

다만 타입스크립트에서 제공하는 차이점 중 하나는 모호함을 제거하기 위해 제약을 추가했다는 점이다.

// Is only 'Foo' a type? Or every declaration in the import?
// We just give an error because it's not clear.
import type Foo, { Bar, Baz } from "some-module";
//     ~~~~~~~~~~~~~~~~~~~~~~
// error! A type-only import can specify a default import or named bindings, but not both.

 

 import type과 함께 타입스크립트 3.8는 런타임에 쓰이지 않을 import를 다루기 위해 추가적으로 컴파일러 플래그를 추가했다 : importsNotUsedAsValues

• 해당 플래그 값은 3개 중 하나로 설정 가능하다:
  • remove : 오늘날 import 의 기본 동작 방식
  • preserve: 값이 쓰이지 않는 Import 모두 유지. import/side-effect가 유지되는 효과가 있다.
  • error: preserve와 같은 옵션이지만 value import가 타입으로 쓰일 경우 에러를 낸다. 실수로 값이 import되는 것을 방지하면서 side-effect import가 explicit하도록 쓰일 수 있다.

공식 문서를 종합해 보니 MotionProps는 타입으로 쓰고 isolatedModules를 true라고 설정해 둔 상황에서,

디폴트로 타입이라는 정보를 제거해 버리므로 다시 export하는데 값으로 export하려는 불일치 때문에 발생한 거 같다.

😊 Solution

타입으로 쓰일 MotionProps에 해당 정보를 type 키워드로 명시해 주면 된다.

export { classNames, Motion, MotionProps }; //before
export { classNames, Motion, type MotionProps }; //after

 

---

References

 

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export

Documentation - TypeScript 3.8

https://stackoverflow.com/questions/70416680/re-exporting-a-type-when-the-isolatedmodules-flag-is-provided-requires-using

Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.ts