dark mode 기능 구현에서 발생하는 오류문

[임은상]

dark mode 기능 구현에서

 
이런 오류 뜨시는 분 없으신가요?
웃긴게 새로고침 5번하면 평균 1번 꼴로만 저 오류문이 발생해요
검색해보니 nextjs에서 첫 페이지 로드가 SSR로 동작하기 때문에 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이
서로 달라져서 생기는 오류문이라고 하더라구요
실행하는데 전혀 문제없고 스타일 적용도 잘 되요

어쨋든 next.config.js 파일에서 nextConfig에 styledComponents 설정하라고 해서 했더니 안사라지고 똑같이 5번 중 한 번은 나타나는데
혹시 해결 방법 아시는 분 아니면 아실 거 같은 분 도움 부탁드리겠습니다

[codingapple]

styled components 라이브러리 쓰는거면 babel-plugin-styled-components 라이브러리도 설치해야할걸요 

[임은상]

라이브러리 추가했는데도 뜹니다 센세

next.config.js 파일
----------------------------------------

/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
 },
compiler: {
styledComponents: true,
 },
};

module.exports = nextConfig;
----------------------------------------

이렇게 작성했는데 혹시 작성 잘못했나요?

아니면 5번 중 한 번씩 랜덤으로 뜨는걸로 봐서는 문제의 원인 자체가 그게 아닐수도 있으려나..

[codingapple]

새로고침 빠르게하면 원래 그럴수도요 워닝메세지라 실제 사용시만 문제없으면 됩니다

[임은상]

알겠슴니다

[임은상]

좋은 해결책이 떠올랐고 해결했습니다

"검색해보니 nextjs에서 첫 페이지 로드가 SSR로 동작하기 때문에 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이
서로 달라져서 생기는 오류문이라고 하더라구요"

→ 첫 페이지 로드 시 서버에서 지정한 className을 지정해주면 됩니다. 그 className이 "vsc-initialized" 이네요 

[codingapple]

vsc-initialized는 크롬 확장기능이 주는 클래스명같은데 확장기능같은거 끄고 개발하면 잘될수도요

[임은상]

아 그러네요 클래스명 검색하니 바로나옵니다
Video Speed Controller 확장 프로그램 때문에 생기는 거랍니다
감사합니다

[글쓴이]

글