주로 next.js 프레임워크를 사용하다가 만나게 되는 에러이다.
ssr의 특성상 초기 렌더링은 서버측에서 하게 되는데 그때, styled-components에서 만들어주는 className과 클라이언트 측에서 만들어주는 className과 다르기 때문에 나타나는 이슈이다.
해결방법
1. babe-plugin-styled-components를 설치한다.
npm i babel-plugin-styled-components
2. 프로젝트의 루트에 .babelrc 파일을 만들고 설치한 플러그인을 설정한다.
{
"plugins": ["babel-plugin-styled-components"]
}
3. 클라이언트 서버를 재실행한다.
아래 코드는 babe-plugin-styled-components의 소스코드이다.
GitHub - styled-components/babel-plugin-styled-components: Improve the debugging experience and add server-side rendering suppor
Improve the debugging experience and add server-side rendering support to styled-components - GitHub - styled-components/babel-plugin-styled-components: Improve the debugging experience and add ser...
github.com
'react' 카테고리의 다른 글
| react-hook-form onBlur 안될때 (0) | 2022.09.28 |
|---|---|
| Rendered more hooks than during the previous render (0) | 2022.03.15 |
| React.js와 Codeigniter 연결하기 (0) | 2021.04.26 |
| hooks로 componentWillUnmount 구현하기 (0) | 2021.04.14 |
| react직접 만들어 보기(2) _ render 메서드 구현 (0) | 2021.01.02 |