Warning: Extra attributes from the server: style 에러 해결하기( next.js)

문제점 및 해결과정

 

프로젝트를 진행하는 도중 아래와 같은 에러가 발생했다. 문제점은 한동안 개발자 도구의 메시지를 선택해놓고 작업을 해서 언제부터 발생했는지 못하는 상황이다..

 

마침 구글링을 해보니 관련 issue가 논의되었어서 해당 이슈를 참고하였다.

https://github.com/vercel/next.js/discussions/22388

Warning: Extra attributes from the server: style · vercel next.js · Discussion #22388

 

사람들이 많은 추론을 하고 있었는데 
1. 프토퍼티를 잘못 적었다.

2. 스타일을 잘못했다.

3. ul li 문젠거 같다.

4. 특정 스타일을 지우니 해결됐다. 

5. extension 문제다

 

우선적으로 내 코드에 문제가 있는지 확인하기 위해서 옛날 commit 시점으로 돌아가보았다. 그런데 분명히 해당 에러가 발생하지 않았던 시점에서도   동일한 에러가 발생하고 있었다.

따라서 가장 합리적인 추론은 5번 extension이다.

 

하지만 사람들마다 지웠다는 extension도 다르고,,, 일단 하나씩 확인해보기로 했다.

 

 

내 경우에는 ZeroBlur이었다...

 

해당 extensition을 지우니 에러가 사라졌다.

 

 

느낀점

에러는 굉장히 다양한 원인에서 발생한다.. 그런데 모듈간의 결합에 의한 에러는 굉장히 찾기 힘들고, 아직.. 왜 그런지에 대한 해답을 찾기가 너무 어렵다...

next.js와 R3F drei의 html의 결합에서 생긴 에러도 아직 명확히 해결하지 못했었다..

아직 성장할 길이 많이 남았다는 것을 느꼈다..