yarn berry 도입 (yarn 1 -> yarn 2+)

필자는 react + storybook + chromatic + typescript + scss + rollup 등으로 구성되어 있고 라이브러리를 npm까지 올리는 디자인시스템 프로젝트를 yarn berry로 변경해 보았다. 

 

yarn 버전 우선순위

순위
1	작업 디렉토리에 .yarnrc.yml 있을경우 ({project}/.yarnrc.yml
2	global yarnrc.yml

 

yarn 버전 변경 (참조)

yarn set version berry

yarn set version classic

 

yarn berry 버전으로 변경

1.1. 기존 의존성 제거

$ rm -rf node_modules
$ rm -rf yarn.lock

 

2.2. yarn berry 변경

$ yarn set version berry

 

2.3. install

package를 설치하고 .pnp.cjs에 의존성을 찾을 수 있는 정보가 저장된다.

$ yarn

 

기타. 실행 스크립트 참조

# 기존 버전 확인
$ yarn --version
  1.22.19

# 의존성 파일 모두 제거
$ rm -rf node_modules
$ rm -rf yarn.lock

# berry 버전 변경
$ yarn set version berry

# 변경된 버전 확인
$ yarn --version
  4.0.2


# 기존 classic으로 변경
$ yarn set version classic

# 기존 버전 확인
$ yarn --version
  1.22.19

 

참고사항

.gitignore 설정 (참조)

제로 설치를 사용하는 경우

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

 

제로 설치를 사용하지 않는 경우

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

변경 후 에러

1. babel 의존성 에러

실행

$ yarn storybook

 

에러

ERROR in ./src/components/Button.stories.ts
Module build failed (from ./.yarn/__virtual__/babel-loader-virtual-353f661718/6/.yarn/berry/cache/babel-loader-npm-9.1.3-cbf4da21df-10c0.zip/node_modules/babel-loader/lib/index.js):
Error: [BABEL]: @babel/plugin-transform-react-jsx tried to access @babel/core (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.

 

해결

@babel/plugin-transform-react-jsx 에서 @babel/core(피어 종속성)에 엑세스 하려고 했는데 없다고 한다. 설치해주자!

$ yarn add --dev @babel/core

 

2. rollup에서 tslib 모듈 참조 에러

실행

$ yarn build

 

에러

[!] (plugin typescript) RollupError: @rollup/plugin-typescript: Could not find module 'tslib', which is required by this plugin. Is it installed?

 

해결

@rollup/plugin-typescript 플러그인에 필요한 tslib 모듈이 없다고 한다. 설치해주자!

$ yarn add --dev tslib

 

3. npm publish 에러 (참조)

실행

$ npm build-publish

 

에러

 

해결

package.json의 script 변경이 필요하였다.

`yarn build && yarn publish --access public` -> `yarn build && yarn npm publish --access public`

에러 전

{
  ...
  "scripts": {
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "build": "rollup -c",
    "build-publish": "yarn build && yarn publish --access public"
  },
  ...
}

{
  ...
  "scripts": {
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "build": "rollup -c",
    "build-publish": "yarn build && yarn npm publish --access public"
  },
  ...
}

 

yarn V2로 넘어오면서 명령어가 바뀌었다. (참조)

# Yarn 1 (Classic)
yarn publish

# Yarn 2+
yarn npm publish