TextArea (react-textarea-autosize) is forced to browser API version, causing an error in SSR builds #1687
Closed
1 of 3 tasks
Labels
bug
Issues related to anything that isn't working
Comments
sungik-choi
changed the title
6 tasks
sungik-choi
added a commit
that referenced
this issue
Oct 20, 2023
…t error (#1688) <!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> Fixes #1687 ## Summary <!-- Please brief explanation of the changes made --> - react-textarea-autosize의 버전을 `8.3.4` 로 다운그레이드하고, 버전을 고정합니다. - revert #1637 ## Details <!-- Please elaborate description of the changes --> #1637 에서 react-textarea-autosize의 변경으로 인해 rollup의 node module resolve 방식을 변경했습니다. SSR 환경에서도 browser용 번들을 바라보게되면서, `document` 관련 에러가 발생하여 빌드가 실패하는 문제가 발생했습니다. 이를 해결하고자 여러 방법을 고려해봤는데, 1. main module은 SSR용 모듈로 두고, browser용 exports field를 추가: 빌드 시 browser exports field를 고려하지 않고 있는 다른 사용처에서의 사이드 이펙트가 우려되어서 선택하지 않았습니다. 2. external dependency로 명시하여 peer dependency로 변경: Breaking change를 발생시키고 싶지 않았습니다. TextArea 컴포넌트를 사용하지 않는 사용처에서도 라이브러리 사용이 강제됩니다. peerDependenciesMeta.optional를 사용하는 방법으로 우회하더라도 매력적인 선택지는 아니라고 생각했습니다. 3. 런타임에 document 체크를 하는 로직 추가: 로직을 추가하고 테스트 해보았으나 여전히 에러가 발생했습니다. 자세히 빌드 과정(Next.js)을 뜯어보진 않았지만, 런타임을 고려하기 이전에 모든 모듈을 정적 분석 + 에러를 던지는 것으로 보입니다. 4. **다운그레이드 및 리버트** 기존에도 큰 문제없이 잘 동작하던 모듈이고, react-textarea-autosize의 변경사항을 봐도 서버 사이드에서 파일 사이즈의 감소 외에는 로직 변경이 없었습니다. 사용처에 별다른 영향이 없을 거로 판단하고 문제 해결을 위해 다운그레이드하는 방향으로 결정했습니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No. 이전 버전도 기존에 정상적으로 잘 동작하던 모듈입니다. ## References <!-- Please list any other resources or points the reviewer should be aware of --> - [관련 채널톡 스레드](https://desk.channel.io/root/groups/WebBezier-124831/6530b7edbda0b8528c47) - Andarist/react-textarea-autosize#335
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Summary
textarea-autosize의 browser API 버전 사용 강제를 해제 또는 선택할 수 있게 해야합니다
Reproduction process
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 occurredVersion of bezier-react
1.15.0
Browser
Node 환경입니다
Operating system
Additonal Information
Note
nodeResolve.browser: true설정이 추가되었습니다nodeResolve.browser: false옵션으로 빌드한 bezier-react를 Nextjs 프로젝트에서 가져와 빌드 테스트시 정상적으로 빌드됩니다The text was updated successfully, but these errors were encountered: