Webpack → Vite: 스토리북의 번들러 마이그레이션

스토리북 번들러를 Webpack에서 Vite로 마이그레이션 했습니다. 이 과정에서 여러 이슈가 연쇄적으로 발생하여 결과적으로 기존 기술 스택을 변경해야 했습니다.

기술 스택 변경

• [기존 기술 스택] Storybook v6.5, builder-webpack5, Node v18, Yarn 1
• [최종 기술 스택] Storybook v7, react-vite, Node v18, Pnpm

---

마이그레이션 시 발생한 이슈

1. Webpack 4와 OpenSSL 3 버전 호환 이슈

• 이슈 설명

  • builder-webpack5를 builder-vite로 마이그레이션 하는 과정에서 OpenSSL
    버전 호환 이슈 발생
  • Webpack 5.61.0 미만 버전에는 구버전 OpensSL을 이용하고, 그 이후에는 OpenSSL 3를 이용
  • Storybook v6는 Webpack 4를 디폴트 빌더로 이용하고, Webpack 5를 옵셔널하게 제공
  • 당시 Webpack 5를 선택했었고, Webpack ^5.9.0 를 사용하는 builder-webpack5를 이용해 OpenSSL 에러가 발생하지 않았음
  • 마이그레이션한 builder-vite는 Vite를 이용해 빌드를 해도, Storybook v6에서 디폴트 빌더로 Webpack 4를 이용하기에 OpenSSL 버전 호환 이슈가 발생함

• 해결 방법: Storybook v7로 마이그레이션

  • Storybook v7에서는 Vite를 이용할 때 스토리북 내부적으로 Webpack4를 이용하지 않기 때문에 OpenSSL 에러가 발생하지 않음

2. Yarn 1의 호이스팅으로 인해 버전이 다른 디펜던시 사용

• 이슈 설명

  • @isaacs/cliui 패키지에서 ESM 포맷의 string-width@5와 CommonJS(CJS)
    포맷의 string-width@4를 string-width-cjs라는 alias로 사용하고 있음
  • Yarn 1은 중복 의존성 패키지를 루트 노드 모듈로 호이스팅 하기에, 패키지에서 설치하지 않은 디팬던시에 접근할 수 있음
  • string-width@4와 @5는 여러 패키지에서 중복해서 사용되는 sub-dependency이기 때문에 루트 노드 모듈로 호이스팅되었음
  • string-width 패키지 중에서 CJS 포맷의 cli-table3가 string-width@4에 접근하려 했지만, alias로 인해 동일 버전이 존재하지 않아 ESM 형식의 string-width@5를 resolve 해 모듈 호환 문제 발생

• 해결 방법: 팬텀 디팬던시가 발생하지 않는 pnpm으로 패키지 매니저 변경

[tk1583]

질문. webpack에서 esbuild-loader를 사용하지 않은 이유가 있을까요?

답변.

Native ESM 기능을 이용하기 위해 Vite를 이용했습니다.

esbuild-loader는 Webpack에서 esbuild를 이용할 수 있게 하는 로더로 알고 있는데요. esbuild-loader를 이용하면 빌드 속도가 매우 빨라지지만, 여전히 번들링 과정을 거쳐야 합니다.

반면 Native ESM을 이용하면 사용하는 모듈만을 빌드해 브라우저에 전달하고, 모듈이 변경될 경우 변경된 모듈만을 빌드하기에 더 빠릅니다.

스토리북 같이 특정 컴포넌트만을 요청하는 경우에 Native ESM을 이용하는 것이 좋다고 판단해 Vite를 이용했습니다.