게시글

5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭
강좌7 - TypeScript - 일 년 전 등록 / 9달 전 수정

ESM 모듈 불러올 때 TS2307, TS1479 해결법

일단 대부분의 경우 Node.js와 타입스크립트를 같이 쓸 때 , 그리고 ESM 모듈을 불러올 때 해당 에러가 발생할 겁니다. 

TS2307: Cannot find module 패키지명  or its corresponding type declarations.

설마 타입 정의가 없는 패키지를 받으신 건 아니죠..? 그러면 @types를 설치하거나 직접 declare module로 타이핑을 하면 됩니다.

이 글은 CommonJS에서 ESM을 import할 때 발생하는 TS2307 에러에 대해 다룹니다.

먼저 모듈을 Node16으로 맞춰줍니다. Node16이면 현재 프로젝트가 CommonJS면 CommonJS로 결과를 내놓고, ESM이면 ESM으로 결과를 내놓습니다.

"module": "Node16",

그리고 import 대신에 dynamic import문을 사용해야 합니다. import('모듈명')을 해서 Promise로 모듈 결괏값을 받으면 됩니다. 이 게시글 참조 이러면 모든 에러가 사라집니다.

여기서 문제가 type만 import하고 싶을 때입니다. import type을 하는 경우는 ESM이든 CommonJS이든 상관 없지 않느냐 할 수 있는데(실제로 저도 왜 에러가 나는지 이해가 안 됩니다) 여전히 다음과 같은 에러가 남아 있습니다.

import type { ShowPropertyProps } from 'adminjs'; // adminjs에서 에러

TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("adminjs")' call instead.

typescript 5.2까지는 다음과 같이 할 수밖에 없습니다.

// @ts-expect-error
import type { ShowPropertyProps } from 'adminjs';

@ts-expect-error를 붙여주면 해결됩니다. 그런데 @ts-expect-error를 쓰는 것에서 에러가 난다면 .eslintrc에서 rules로 ban-ts-comment를 off 해줍시다.

rules: {
  ...
  '@typescript-eslint/ban-ts-comment': 'off',
  ...
}

typescript 5.3부터는 다음과 같이 할 수 있게 되었습니다. import attributes 문법입니다.

import type { ShowPropertyProps } from 'adminjs' with { 'resolution-mode': 'import' };

조회수:
0
목록
투표로 게시글에 관해 피드백을 해주시면 게시글 수정 시 반영됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright 2016- . 무단 전재 및 재배포 금지. 출처 표기 시 인용 가능.
5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭

댓글

아직 댓글이 없습니다.