[YarnBerry] yarn으로 express 초기세팅 오류 해결 - Cannot find module 'x' or its corresponding type declarations.ts(2307)

 

 

import로 모듈을 가져올 수 없다?

최근에 패키지 관리를 npm이 아닌 yarn berry로 하게 되었다.

아직 익숙하지 않는데 import부터 안될줄은 생각도 못했다 🤣

 

@types 때문인가?

typescript는 쓰면 분명 npm i [모듈이름]으로 다운 받았는데도 안되는 경우가 있다.

그러면 vscode에서 친절하게 npm i @types/[모듈이름] 해줄까 라고 물어본다.

@types로 한 번 더 모듈을 다운로드느 하는 이유는 JavaScript엔 필요 없는 타입추론을 TypeScript에서는 하기 때문이다.

 

yarn add @types/express --dev

그래서 바로 yarn add 명령어를 이용해서 다운로드 해줬지만 여전히 오류가 사라지지 않았다.

 

 

VSCode에 쓰려면 다음과 같은 절차가 필요하다!

출처: https://yarnpkg.com/getting-started/editor-sdks#vscode

yarn 공식문서에서 가져왔는데 보면 알겠지만 VSCode에서 yarn을 사용하기 위해서는 위와 같은 절차가 필요하다.

 

yarn dlx @yarnpkg/sdks vscode

우선 위 명령어를 입력하면 다운로드가 되면서 .yarn 폴더 아래 sdks라는 새 폴더가 생겼다.

 

여기에서 중요한 것!

vscode에서 바로 'typescript workspace 버전 사용 할래?'라고 물어본다.

이때 Allow 버튼을 눌러줘야 한다.

혹시라도 창을 꺼버렸거나 다른 버튼을 눌렀다면 command + shift + p를 눌러 'select typescript version'을 눌러 'use workspace version'을 클릭해주면 된다.

 

 

 

반응형

 

 

끝나지 않았어..

다 된 줄 알았는데..ㅎ

다른 오류가 나왔다.

Module 'x' can only be default-imported using the 'esModuleInterop' flagts(1259) 가 뭘까?

 

찾아보니 CommonJS 모듈을 ES6 모듈로 가져오려고 할 때 생기는 오류라고 한다.

 

// tsconfig.json
{
  "compilerOptions": {
    "esModuleInterop": true,
    ...
  },
  ...
}

해결하기 위해선 tsconfig.json에서 esModuleInterop 옵션을 true로 설정해야 한다.

 

 

vscode 상에서 빨간 줄이 없어졌다!

인제 모듈이 실제로도 잘 동작하는지 확인해보자.

 

 

 

또 안되는데?

ts-node src index.ts

명령어로 파일을 돌려보니 Cannot find module 'express' or its corresponding type declarations. 라는 새로운 오류를 만났다.

환장하겠네.

 

https://woojin.tistory.com/23

Express 초기 세팅, yarn 사용법

이거저거 찾아보다 yarn으로 express 초기세팅을 완벽하게 해내는 포스팅을 찾게 되서 공유한다.

 

나의 경우 3.express 설치부터 해주었는데 잘 따라해본 결과 무리없이 잘 서버가 통신되는 것을 확인했다!

esModuleInterop이 true인데도 나처럼 안된다면 아마도 tsconfig 파일이 잘못 되었을 경우가 크다.

그러니 위 포스팅에 들어가서 tscofig.json만 그대로 사용해보길 바란다.

 

 

 

fin.