Next.js
렌더링 오류
- 새로운 사이드 프로젝트를 만들어보려고 next.js를 설치했다.
- styled-components를 설치하였는데,
Cannot read properties of null (reading 'edgesOut')에러가 발생했다. - 해결법을 찾아보던 중 styled-components의 최신 버전을 설치하면 해결된다고 하는 글을 보고
npm install styled-components@latest를 설치하여 해결했다. - 그렇게 프로젝트를 작성 중
className에 대한 에러가 발생했다. - Next.js에서
className을 props로 전달할 경우 발생하는 에러로, Css가 적용되기 전에 렌더링이 되어 발생한다. - 해결 방법으로는
babel을 설치하여 해결할 수 있다.
Babel
- 구식 브라우저(IE 등) 환경에서 호환되도록 버전을 변환하는 역할을 한다.
- 현재는 JSX문법, TS 타입언어, 코드압축 등의 부가기능들도 존재한다.
다시 설치
npm i bable/styled-components를 설치하려하는데 이번엔 기존styled-components와 충돌이 났다.- 이에 대해 찾아보니 스타일 컴포넌트 최신 버전에 대해선 이런 충돌 에러가 발생하는 문제점이 존재했다.
- 그래서 버전을 5.3.10으로 낮춰서 다시 설치 후
babel설치를 시도하였는데 해결되었다.
다시 오류…
- 이번엔 기존에 없던 styled-components에 대한 타입 에러가 undefined가 되어 추가적인 해결 필요…
- 기존에 수정하고 있던 컴포넌트가 아닌 index 파일에서
import {styled}가져와져 styled-components를 인식하지 못한 별 거 아닌 해프닝이었다.