channel-io / bezier-react

React components library that implements Bezier design system.
https://main--62bead1508281287d3c94d25.chromatic.com
Apache License 2.0
206 stars 46 forks source link

TextArea (react-textarea-autosize) is forced to browser API version, causing an error in SSR builds #1687

Closed leejiwoo2002 closed 10 months ago

leejiwoo2002 commented 10 months ago

Summary

textarea-autosize의 browser API 버전 사용 강제를 해제 또는 선택할 수 있게 해야합니다

Reproduction process

  1. 베지어 최신 버전(1.15.0)을 사용중인 Nexjs 프로젝트를 빌드합니다 (기존에 사용중이던(1.5.0) 버전에서는 문제가 없었습니다)
  2. 빌드 수행시 react-textarea-autosize의 browser.esm 모듈을 참조하게됩니다
  3. 이 모듈 내부에는 document.XXX 형태로 CSR 상황을 가정한 코드가 들어있어 SSR(node 환경)에서 참조 에러가 발생합니다
  4. 에러 로그는 아래와 같습니다
    
    info  - Collecting page data .ReferenceError: document is not defined
    at file:///Users/bruce/WebstormProjects/ch-inhouse-frontend/apps/ch-homepage/node_modules/@channel.io/bezier-react/dist/esm/node_modules/react-textarea-autosize/dist/react-textarea-autosize.browser.esm.mjs:98:12
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Build error occurred



### Version of bezier-react

1.15.0

### Browser

Node 환경입니다

### Operating system

- [X] macOS
- [ ] Windows
- [ ] Linux

### Additonal Information

# Note
1. [1.13.0 버전 릴리즈 태그](https://github.com/channel-io/bezier-react/releases/tag/%40channel.io%2Fbezier-react%401.13.0)에서 `nodeResolve.browser: true` 설정이 추가되었습니다
2. 이에 react-textarea-autosize 라이브러리의 참조가 브라우저 버전으로 고정된것으로 보입니다
3. `nodeResolve.browser: false` 옵션으로 빌드한 bezier-react를 Nextjs 프로젝트에서 가져와 빌드 테스트시 정상적으로 빌드됩니다
4. 현재 홈페이지의 니즈는 새로운 Tooltip을 사용하는게 목표입니다 
5. 현재 홈페이지는 Bezier/TextArea를 사용중이지 않습니다. 따라서 당장은 1.13.0 이전 버전을 사용하는 방법도 옵션입니다
sungik-choi commented 10 months ago

관련 이슈: https://github.com/Andarist/react-textarea-autosize/issues/335