[bblog 3.5] Chakra UI와 Nextjs feat. CacheProvider

나는 Chakra UI를 상당히 좋아한다 

다른 이유는 없고 상당히 가벼운 느낌과 지속적인 업데이트

그리고 취향저격을 날리는 디자인 이것들만 해도 충분히 나의 마음을 이끈다 

 

그런데.. 이번에 Nextjs 13 버전과 같이 사용하면서

컬러모드를 커스텀하는 상황이 발생하였다 

 

그리고 나타난 문제 ..

 

https://chakra-ui.com/docs/styled-system/customize-theme#customizing-global-styles

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a

tool로 설치되는 mode() 함수의 적용이 불가능하다는 것을 깨달았다..

 

혼자서 "아니 왜 안 되는 것이야..! " 하면서 한 2시간 삽질하던 중에 이러한 버그를 발견했다

https://github.com/chakra-ui/chakra-ui/issues/7681

mode @chakra-ui/theme-tools not work in nextjs 13 · Issue #7681 · chakra-ui/chakra-ui

 

마침 나와 같은 문제를 가진 사람이 또 있었고 이미 이슈를 제기했지만 

유지보수하는 아데바요..? 씨는 그냥 냅다

" 먼솔? 님 말하는 거 이해 못 하겠음 예시 제시 좀;; " 하고 냅다 이슈를 닫아버렸다 

 

여하튼 문제는 chakra UI의 css시스템에 영향을 주는  emotion의 라이브러리의

EmotionCacheProvider를 커스터마이징 한 CacheProvider의 문제로 판단된다 

 

이미 디버깅을 다 끝냈고 해당 프로바이더를 수동으로 새로 만들어서

CacheProvider를 작성하여 수동으로 적용해 보니

동일문제가 재현되는 것을 확인하였다

 

임시로 해결하는 방법은 일단 CacheProvider를 삭제하면 된다

 

여하튼, 문제는 내가 Emotion.js를 하나도 할 줄 모른다는 점

 

그럼 뭐다..? >> 아데바요에게 던진다!! 

 

라고 이슈에 까먹지 말라고 다시 재현스탭과 코드를 남겨두었으며

(이미 재현코드가 있으나 좀 복잡해 보여서 기본 예제에 입혀서 예시를 올려둠)

 

부디 해결되길 바라는 마음으로.. 날을 기다린다 

 

 

feat. 10월 3일 기준 아직도 해결되지 않았다 흑흑..