yarn berry에서 auto import가 안돼요 🫤

:: 설치 환경

• yarn berry
• next.js
• vscode
• typescript

강의들으면서 따라하는데 강의는 npm을 사용했고 나는 이제 yarn berry에 익숙해져 보려고 혼자 yarn berry로 셋팅했다.

그런데 자동으로 import가 안된다. ( 필자는 vscode 사용중, 패키지 찾는거 조차 못함 바보 쨔석..! )

@type/react를 설치해봐라 tsconfig.json 파일을 수정해보라는 답변들은 다 소용없었다!!

 

확인해보니 기존 node_modules에서 패키지를 읽어오는 방식과 달리 yarn berry에서는 PnP 방식에 zip 아카이브를 사용하고 있어서 vscode가 못 불러오는 듯 하다. 그래서 별도의 확장 프로그램 설치 및 에디터 설정이 필요했다.

1. vscode extension에서 zipFS 설치
2. yarn editor sdk 설치 yarn dlx @yarnpkg/sdks vscode
3. 맥북 command + shift + p
4. Select TypeScript Version 선택
5. Use Workspace Version 선택

이렇게 해주면 설정 끝!

2번 부분이 무엇인지에 대해 설명을 해둔 곳이 없어 조금 더 찾아봤다.

dlx 명령어는 임시로 패키지를 설치하는 것으로 의존성 없이 설치 된다고 한다. 

실제로 2번 명령어를 사용했을 때 /.yarn/sdks 폴더에 설치가 됐고 package.json에 추가되어 있지 않았으며,

.pnp.cjs 파일도 확인해보니 ignorePatternData 옵션에 sdks 폴더명이 패턴으로 추가 되어 있었다.

설치된 .yarn/sdks의 package.json를 살펴봤다.

{
  "name": "typescript",
  "version": "5.3.3-sdk",
  "main": "./lib/typescript.js",
  "type": "commonjs",
  "bin": {
    "tsc": "./bin/tsc",
    "tsserver": "./bin/tsserver"
  }
}

 

main 경로의 파일을 열어 봤는데, .pnp.cjs의 의존성을보고 패키지들을 불러오도록 설정 되어 있는 것 같다.

#!/usr/bin/env node

const {existsSync} = require(`fs`);
const {createRequire} = require(`module`);
const {resolve} = require(`path`);

const relPnpApiPath = "../../../../.pnp.cjs";

const absPnpApiPath = resolve(__dirname, relPnpApiPath);
const absRequire = createRequire(absPnpApiPath);

if (existsSync(absPnpApiPath)) {
  if (!process.versions.pnp) {
    // Setup the environment to be able to require typescript
    require(absPnpApiPath).setup();
  }
}

// Defer to the real typescript your application uses
module.exports = absRequire(`typescript`);

 

 

 

[참고] https://velog.io/@warmwhiten/yarn-berry-typescript-eslint-prettier-emotion-react