fix console errors from bezier-react #2238
Merged
+30
−12
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 16dc30d The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #2238 +/- ##
==========================================
+ Coverage 84.61% 84.65% +0.03%
==========================================
Files 135 136 +1
Lines 2886 2893 +7
Branches 875 876 +1
==========================================
+ Hits 2442 2449 +7
Misses 415 415
Partials 29 29 ☔ View full report in Codecov by Sentry. |
Chromatic Report🚀 Congratulations! Your build was successful! |
nabi-chan
added a commit
to nabi-chan/blog
that referenced
this pull request
May 24, 2024
- bezier react 내 오류로 인해 콘솔에 오류가 뜨는 문제를 해결합니다. - bezier react 의 버전을 2.0.6으로 업데이트 합니다. channel-io/bezier-react#2238 (comment)
nabi-chan
added a commit
to nabi-chan/blog
that referenced
this pull request
May 24, 2024
* [v2] initial commit * chore: add .vscode setting * [v2] add global layout (#14) - 어드민 / 사이트 레이아웃 추가 * chore: drop prisma migration * chore: add styled-components support * chore: update supabase type * [v2] 블로그 기능을 추가 (#16) - [x] 에디터 정하기 - [x] AST를 렌더링 하는 기능 추가하기 - [x] API 연결하기 * docs: update README.md * [v2] fix blog issues (#17) - [x] 브라우저가 다크모드일때 컨텐츠가 검정색으로 나오는 이슈 - [x] github-markdown-css를 styled-components로 이동 - [x] 좁은 뷰포트에서 블로그 네비바가 깨지는 문제를 해결 - [x] Github Callout - [x] Github에 하드링크된 코드 제거 * [v2] patch bezier-react (#18) - bezier react 내 오류로 인해 콘솔에 오류가 뜨는 문제를 해결합니다. - bezier react 의 버전을 2.0.6으로 업데이트 합니다. channel-io/bezier-react#2238 (comment) * [v2] add custom page features (#19) * [v2] allow raw html in markdown (#20) # In this PR... - raw한 html을 마크다운 파일에서 받았을 때, 이를 렌더링 할 수 있도록 합니다. * [v2] fix invalidate post query not working * [v2] add deleting feature (#21) ## Whats in this PR... - 페이지를 삭제하는 기능을 추가 - 블로그 글을 삭제하는 기능을 추가 * [v2] fix shikijs style and transformers
nabi-chan
commented
May 28, 2024
yangwooseong
approved these changes
May 28, 2024
packages/bezier-react/src/components/BaseTagBadge/BaseTagBadge.tsx
Outdated
Show resolved
Hide resolved
|
PR에 적절한 라벨을 붙여주세요 |
sungik-choi
approved these changes
May 28, 2024
yangwooseong
force-pushed
the
fix/console-errors
branch
from
8b8a813
to
d9fce7a
Compare
nabi-chan
added
enhancement
nabi-chan
force-pushed
the
fix/console-errors
branch
from
d9fce7a
to
08d41b2
Compare
- forwardRef -> forwardedRef
- add description
nabi-chan
force-pushed
the
fix/console-errors
branch
from
08d41b2
to
bce1622
Compare
- remove line-break on jsdoc
Co-authored-by: Yang Wooseong (Andrew) <dntjddid1@gmail.com>
yangwooseong
pushed a commit
that referenced
this pull request
May 29, 2024
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@2.0.7 ### Patch Changes - Change `position` property of `ToastContainer` to `fixed` ([#2245](#2245)) by @yangwooseong - Fix typo in `IconProps` jsdoc ([#2232](#2232)) by @yangwooseong - - Fix ReactJS console warnings. ([#2238](#2238)) by @nabi-chan - Introduce `useIsomorphicLayoutEffect` hook to use `useLayoutEffect` in SSR environment. - Add `AlphaSpinner` component ([#2237](#2237)) by @yangwooseong ## bezier-figma-plugin@0.5.7 ### Patch Changes - Updated dependencies - @channel.io/bezier-react@2.0.7 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Self Checklist
Related Issue
None
Summary
bezier-react 를 사용할 때 뜨는 리액트 경고를 해결합니다.
Details
ToastContainer 내
Each child in a list should have a unique "key" prop.경고이 이슈는 다음의 원인으로 인해 발생하는 이슈입니다.
packages/bezier-react/src/components/Toast/Toast.tsx내createContainer함수에서 InvertedThemeProvider를 사용하게 되는데, 이때 해당 컴포넌트에 key값이 들어가지 않아 생기는 에러입니다.이를 InvertedThemeProvider 내에 넣도록 변경함으로써, 문제를 해결하고자 합니다.
BaseTagBadgeText 내
forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?에러이 이슈는 다음 원인으로 인해 발생됨이 추정됩니다.
stack trace를 따라가다보면, 최종 끝에 다다르는 파일이
BaseTagBadge.mjs에 위치하게 되는데, 여기서 유일하게 ref parameter를 사용하지 않는 컴포넌트는BaseTagBadgeText컴포넌트가 유일합니다.따라서 해당 컴포넌트에 forwardRef를 사용하게 함으로써 이 문제를 해결하고자 합니다.
NextJS와 같은 SSR 환경에서 useLayoutEffect가 동작하지 않는 이슈
https://reactjs.org/link/uselayouteffect-ssr 에 따르면, SSR 환경에서는 useLayoutEffect가 동작하지 않게 되고, 이는 곧 hydration mismatch로 이어지게 되어 해당 경고가 출력됨을 안내하고 있습니다.
여기서 제시하는 방법은 총 2가지로, 1.
useLayoutEffect를useEffect로 변경하거나, 2. useLayoutEffect를 사용하는 컴포넌트를 Lazy하게 로딩하는 방법을 제시하고 있습니다.하지만 위 2가지 방법은 각각 다음과 같은 문제가 있는데요.
이 대신 서버사이드 렌더링 환경에서는 useEffect를 반환하고, 클라이언트사이드 환경에서는 useLayoutEffect를 사용하는
useIsomorphicLayoutEffect을 만들어 이 문제를 해결하고자 합니다. (#)해당 방식은 react-redux 와 react-beautiful-dnd 와 같이 유명한 라이브러리에서 사용되고 있어, 안정성이 보장된다고 판단됩니다.
Breaking change? (Yes/No)
NO
References