cra + typescript + yarn berry 세팅

cra + yarn berry 세팅하며 발생한 이슈를 정리해보았습니다.

cra + yarn berry 세팅

1. create-react-app을 사용하여 react 환경을 구성합니다.
   npx create-react-app cra-with-berry --template typescript
2. node_modules과 lock 파일을 제거합니다.

# 1. 생성한 cra 폴더로 이동
cd cra-with-berry
# 2. node_modules 제거
rm -rf node_modules
# 3. lock file 제거
rm -rf package-lock.json
# 또는
rm -rf yarn.lock

1. yarn 버전을 설정합니다.
   yarn set version berry
2. 패키지를 설치합니다.
   yarn # 또는 yarn install
3. .gitignore 추가
   • Zero-Installs 사용 시

     .yarn/*
     !.yarn/cache
     !.yarn/patches
     !.yarn/plugins
     !.yarn/releases
     !.yarn/sdks
     !.yarn/versions

   • Zero-Installs 사용 안할 시

     .pnp.*
     .yarn/*
     !.yarn/patches
     !.yarn/plugins
     !.yarn/releases
     !.yarn/sdks
     !.yarn/versions

 

cra + yarn berry 세팅 후 실행 시 발생하는 에러

세팅을 끝내고 yarn start 명령어를 실행해보면 에러가 발생할니다.

1. Typescript 버전 이슈

yarn 3.3.0 버전을 기준으로 typescript의 버전이 4.9.4 이상일 때는 typescript의 버전을 4.9.3으로 낮추거나 yarn의 버전을 변경해주어야 합니다.

yarn remove typescript
yarn add typescript@4.9.3

또는

yarn set version canary
yarn install

참고 링크: yarnpkg github issue

 

2. test.tsx 에러

위의 에러는 @types/testing-library__jest-dom를 설치하면 해결됩니다.
yarn add -D @types/testing-library__jest-dom

추가로 yarn plugin import typescript 명령어를 통해 플러그인을 import 해주면 자동으로 @types/packages를 추가하기 때문에 더 편리하게 패키지를 설치할 수 있습니다.

 

3. vscode 세팅

tsx 파일을 열어보면 아래와 같이 에러를 볼 수 있습니다.

 

vscode에서 typescript를 정상적으로 사용하기 위해서는 추가 설정이 필요합니다.

1. VSCode 확장 프로그램 ZipFS 설치
2. yarn dlx @yarnpkg/sdks vscode
3. CTRL+SHIFT+P(windows) 또는 CMD+SHIFT+P(mac) 입력을 통해 Command Palette 실행
4. TypeScript: Select TypeScript Version... 선택
   

   

5. Use Workspace Version 선택
   

   

 

여기까지 설정이 되었다면, 에디터에서 정상적으로 출력되는 것을 확인할 수 있습니다.

 

마지막으로 yarn start 실행

에러 없이 정상적으로 실행이 완료되었습니다.