NextJS - 3 CSS-in-JS 사용 관련 버그

사이드프로젝트로 GraphQL이랑 emotion을 사용하고 SSR/CSR을 좀 연습하고자 했다.

 

상황

NextJS13 을 설치하고 진행하는데 emotion을 설치하고 나니 기본 페이지조차 렌더링되지 않고 에러가 뜬다.

그동안 "use client" 명령으로 모두 CSR로 진행을 하다가.. 이게 무슨 의미가 있나 싶어서 어떻게든 해결해보고자 했다.

 

원인

NextJS 13버전은 버그가 있는데, CSS-in-JS가 지원되는 라이브러리가 한정적이다.

CC에서 지원이 되네 안되네 하는데,

사실 그냥 라이브러리를 설치해서 패키지 등록되고 하면서 세팅들이 이루어지면,

SSR에서 emotion 자체를 부르지도 않았음에도 에러가 뜬다.

Hello world처럼 기본으로 제공되는 NextJS 로고 화면 조차 에러가 떠서 열 수가 없다.

에러는 TypeError: createContext... 이렇게 뜨게된다.

아래 공식문서를 확인하면 이렇게 나와 있다.

 

emotion에 대해서는 작업중이다.

 

몇일전만 해도 MUI도 지원되지 않았는데, 지금보니까 그 사이에 MUI는 해결이 된 것 같다.

그런데 나의 목적이었던 Emotion은 넥제 13 버전 출시 이후로 아직도 지원되지 않고 있다.

 

그래도 emotion과 같이 이슈였던 MUI가 해결된 것 보면, Emotion도 이제 오래 걸리지는 않을 것으로 보이지만

SSR을 진행하지 않을 바에야 CNA로 굳이 작업할 이유가 없기 때문에 Styled-components를 사용하기로 했다.

 

해결

그냥 Emotion을 쓰지 않으면 된다.

Emotion을 사용하기 위한 세팅이 있기는 한데, 몇가지 세팅해주고 그 뒤에

SSR 코드 맨 위에 jsx pragma라고 하는 것이 /**JSX 어쩌고 저쩌고 써야하는게 너무 귀찮아서

그냥 지원이 완료될때까지 모니터링하다가 그때가서 사용하는게 나아보인다.

웃긴게 이 pragma는 emotion의 css prop을 사용할때 속성이 아닌 prop으로 인식하게 하기 위해서 쓰는건데

SSR 페이지/컴포넌트에 emotion 자체를 import 하지 않았는데도 이걸 써줘야 된다.

도무지 이해가 가질 않는다.

 

어차피 나는 Styled-components를 사용할때 Emotion처럼 css라는 props를 만들어서 사용하고 있었기 때문에

큰 차이는 없을 것 같지만,

emotion은 스타일을 객체화시켜서 관리하기가 편하고,

서로 다른 스타일을 병합시키는 게 매우 간편해서 이번 프로젝트에 쓰고 싶었는데 조금 아쉽다.

 

emotion이 해결되면 다시 emotion으로 마이그레이션을 진행할 것 같..지만

빠른 시일내로 되지 않는다면 코드 양이 많아져서 그냥 SC로 종결하겠지

 

 

느낀점

머피의 법칙인가.. 내가 뭔가 하려고만 하면 꼭 이렇게 뭔가 문제가 있거나 이슈가 있어서 사용을 못하더라.