Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Downgrade react-textarea-autosize version to 8.3.4 to fix SSR document error #1688

Merged
merged 3 commits into from
Oct 20, 2023

Conversation

sungik-choi
Copy link
Contributor

@sungik-choi sungik-choi commented Oct 19, 2023

Self Checklist

  • I wrote a PR title in English and added an appropriate label to the PR.
  • I wrote the commit message in English and to follow the Conventional Commits specification.
  • I added the changeset about the changes that needed to be released. (or didn't have to)
  • I wrote or updated documentation related to the changes. (or didn't have to)
  • I wrote or updated tests related to the changes. (or didn't have to)
  • 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

Fixes #1687

Summary

Details

#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)

No. 이전 버전도 기존에 정상적으로 잘 동작하던 모듈입니다.

References

@sungik-choi sungik-choi added fix PR related to bug fix build Issue or PR related to build system labels Oct 19, 2023
@sungik-choi sungik-choi self-assigned this Oct 19, 2023
@changeset-bot
Copy link

changeset-bot bot commented Oct 19, 2023

🦋 Changeset detected

Latest commit: cc09966

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@channel.io/bezier-react Minor
bezier-figma-plugin Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Oct 19, 2023

Chromatic Report

🚀 Congratulations! Your build was successful!

@codecov
Copy link

codecov bot commented Oct 19, 2023

Codecov Report

All modified lines are covered by tests ✅

Comparison is base (f3945b9) 87.18% compared to head (cc09966) 87.18%.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #1688   +/-   ##
=======================================
  Coverage   87.18%   87.18%           
=======================================
  Files         281      281           
  Lines        3903     3903           
  Branches      821      821           
=======================================
  Hits         3403     3403           
  Misses        425      425           
  Partials       75       75           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@sungik-choi sungik-choi changed the title fix(deps): downgrade react-textarea-autosize version to 8.3.4 to fix SSR document error Downgrade react-textarea-autosize version to 8.3.4 to fix SSR document error Oct 19, 2023
@sungik-choi sungik-choi merged commit 82a1314 into channel-io:main Oct 20, 2023
11 checks passed
@sungik-choi sungik-choi deleted the bump/textarea-autosize branch October 20, 2023 04:45
sungik-choi pushed a commit that referenced this pull request Oct 20, 2023
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @channel.io/bezier-react@1.16.0

### Minor Changes

- Fix "document is not defined" error when building in SSR frameworks
like Next.js.
([#1688](#1688)) by
@sungik-choi

## bezier-figma-plugin@0.4.7

### Patch Changes

-   Updated dependencies
    -   @channel.io/bezier-react@1.16.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@sungik-choi sungik-choi mentioned this pull request Feb 27, 2024
6 tasks
sungik-choi added a commit that referenced this pull request Feb 29, 2024
<!--
  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

## Summary
<!-- Please brief explanation of the changes made -->

Install [Syncpack](https://jamiemason.github.io/syncpack/)

## Details
<!-- Please elaborate description of the changes -->

- #1688, #1997 과 같이 패키지 버전에 의해서 에러가 발생하는 경우를 방지 & 문서화하기 위해 Syncpack을
설치했습니다.
- 특정 의존성의 버전을 고정(pin)하거나 Semver 기호를 변경할 수 있습니다. 자세한 내용은 공식문서를 참고해주세요.
- `yarn lint` 커맨드에 `syncpack lint` 과정을 포함하여 의도하지 않은 의존성 버전이 설치될 경우 에러를
뱉도록 설정했습니다.
- 기본적으로 로컬 패키지는 캐럿(`^`)등의 기호를 사용하지 않도록 설정되어있습니다. npm publish된 패키지에선 문제가
없으나, eslint, tsconfig처럼 로컬에서만 사용하는 패키지에서는 semver를 지정할 경우 npm
repository에서 패키지를 검색해서 문제가 발생합니다. 기존처럼 workspace protocol을 사용하도록 설정했습니다.
- 스토리북 addon-styling의 경우에 버전 정책이 달라 무시하도록 설정했습니다.

### 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://jamiemason.github.io/syncpack/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
build Issue or PR related to build system fix PR related to bug fix
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

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