[React + Vite + styled-components] npm 배포 후 ThemeProvider를 인식하지 못할 때

 

디자인시스템을 만들어 npm으로 배포한 뒤 외부 프로젝트에서 받아와 사용하려 했다.

 

디자인시스템의 컴포넌트를 만들 때 ${({theme}) => theme.color.stateRed } ... 이런 식으로 쓴 부분이

외부 프로젝트에서 실행하면 stateRed를 찾을 수 없다며 자꾸 에러가 났다.

(외부 프로젝트에서 ThemeProvider로 감싸준 상태임에도)

 

 

config 파일의 rollupOptions를 아래와 같이 수정해서 해결할 수 있었다.

 

// vite.config.ts

build: {
...  
  rollupOptions: {
    external: ['react', 'react-dom', 'styled-components'],
    ...
  }
}

 

아오 씨..... 이거땜에 config 파일 이것저것 건드려보고 빌드결과물 뜯어보고.. 별짓 다 하면서 하루를 썼네.....

 

 

- Vite는 개발 환경에서 번들러로써 esbuild를 사용하지만 프로덕션 환경에서는 Rollup을 사용한다.

 

- external 옵션의 배열 안에 라이브러리 명을 넣으면, 해당 라이브러리들(react, react-dom, styled-components)을 번들에 포함시키지 않고, 앱 실행 시에 별도로 로드할 수 있도록 한다.

 

- 내가 만들어 배포하려는 디자인시스템의 경우, 화면이 아닌 각 컴포넌트들을 모아놓은 라이브러리이다(진입지점이 index.html이 아닌 index.ts). 이 때 위와 같은 설정이 필요한 것이었다. (vite 공식문서 라이브러리모드)

 

 

 

-

 

반성타임 : 문제해결에 시간 오래걸렸던 이유

* 에러 원인 타겟팅 방향이 틀렸음 (ThemeProvider 관련 문제일거라 생각하고 한참 집착함)

* 샛길로 샘 : 난독화되지 않은 빌드파일을 뜯어보자 > 난독화 푸는데서 삽질 > 이 문제에 매몰되어 여기에 시간을 한참 씀

* config 파일의 빌드옵션들이 각각 어떤 의미인지 정확히 파악하지 못한채 사용함

 

 

 

참고

https://github.com/vitejs/vite/discussions/14194

error when importing a styled-components library build with vite · vitejs/vite · Discussion #14194

 

 

여담 1.

외부라이브러리(rc-slider)를 가져다 커스텀해서 배포한 Slider가 원래라면 아래처럼 보여야 하는데(빌드 전 로컬에서 돌린 건 이렇게 예쁘게 잘 보임)

 

구현하는 부분에서 css 파일을 이렇게 가져왔더니 빌드 결과물인 index.es.js에는 해당 css 파일이 포함되지 않아서 깨져보였다.

 

css가 적용되지 않은 슬라이더

 

빌드 시 css 파일을 index.js 파일에 주입시켜주는 플러그인을 깔아 해결했다.

 

https://www.npmjs.com/package/vite-plugin-css-injected-by-js

vite-plugin-css-injected-by-js

 

 

빌드결과물 맨 첫번째 줄에 rc-slider 관련 css가 들어갔다.

 

 

 

여담 2.

앞서 말한 vite-plugin-css-injected-by-js 를 적용하니 슬라이더는 깨지지 않고 예쁘게 나왔지만,

새 프로젝트에 디자인시스템을 설치하니 아래와 같은 오류가 떴다.

 

"use client"가 최상단에 와야 한다는 에러인데, 디자인시스템 빌드 결과물인 index.es.js를 까보면

 

 

이렇게.. 맨 첫번째 줄에 css 관련 내용이 들어가있어서 발생한 문제였다.

(function(){"use strict"...) 가 rc-slider 라이브러리의 css파일 관련 내용이다)

 

// vite.config.ts

import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'

export default {
    plugins: [
        cssInjectedByJsPlugin({topExecutionPriority: false}),
    ]
}

 

 

플러그인 옵션에 위와 같이 topExcutionPriority: false 옵션을 추가해주니, 빌드 후 "use client"가 최상단으로 와서 해결할 수 있었다.