Github stats 깨짐 해결하기 (Cannot read properties ...)

 매일 작업하는 레파지토리만 띄워두다가 오랜만에 내 깃헙 메인 페이지를 봤는데, 무언가가 깨져있었다.

내가 한 commit, PR 등의 합계를 알려주는 요소(anuraghazra/github-readme-stats)가 있던 자리였다.

 

특정 이름들에게만 이러한 오류가 발생한다고 한다.... (이슈)

현재까지 제일 좋은 방법은 Vercel instance를 사용하는 거라고 하는데...한번 해결해보자.

 

 

1. origin repository fork

Github-readme-stats 제작자의 orgin repository를 fork한다.

 

2. 깃헙 액세스 토큰을 발급한다.

- Github 프로필 클릭시 나오는 Settings 클릭

 

- Personal access tokens 클릭하여 새로운 access token 발급받기

(이때 발급되는 Access Token은 이후에 나도 볼 수 없으므로 어딘가에 잘 기록해둔다.)

 

 

3.  Vercel instance 생성하기

- Vercel 홈페이지 들어가서 회원가입 절차를 밟는다. 

- 로그인이 되면 아래와 같은 화면이 바로 나올텐데, Import Git Repository의 Add Github Account를 통해 메인 계정의 모든 레파지토리들을 추가한다.

 

- 이후 1에서 fork 해두었던 자신의 레파지토리를 우측의 import 클릭한다.

- 하단의 Environment Variables를 펼쳐 아까 기록해두었던 Access Token을 입력한다. (이름은 내맘대로) 

- 그리고 Deploy를 클릭하면..!

이와 같은 에러가 뜬다. 현재 내 플랜에서의 maxDuration은 1-10만 가능하다고 하는데, 내 코드에서 뭔가 더한걸 요구하고 있나보다. 

 

구글링을 해보니 관련 이슈를 찾을 수 있었고, 해결방법은 fork 해온 자신의 레파지토리의 최상단에 존재하는 vercel.json 파일을 수정하는 것이었다!

5번째 줄에 위치한 30이라는 수를 10으로 변경하자.

 "maxDuration": 30    // 변경 전
 
 "maxDuration": 10    // 변경 후

 

아까 Deployment를 누르면서 이미 인스턴스가 하나 생겼으므로, 이를 삭제하고 다시 진행해야한다. 우측 상단의 프로필을 눌러 Dashboard를 클릭하여 아까 생성된 인스턴스를 선택한다. 위의 탭메뉴 중 Settings에서 맨 하단의 Delete 를 클릭하여 삭제할 수 있다.

 

그러면 다시, Create a New Project

=> 아까 fork해온 레파지토리 import 클릭

=> Environment Variables에 Access Token 입력

성공적으로 생성하였다!!

이제 우측 상단의 Contine to Dashboard 를 클릭하여 상세 정보 중 Domains의 주소를 복사한다.  

해당 주소를 에러가 떴던 README.md 파일의 Github-readme-stats 의 주소를 대체한다.

<!-- 기존 -->
![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=Chaemin-L&&show_icons=true&theme=buefy)

<!-- 변경 -->
![Anurag's GitHub stats](https://github-readme-stats-chaemin-l.vercel.app/api?username=Chaemin-L&&show_icons=true&theme=buefy)

나와 같은 경우 이전의 https://github-readme-stats.vercel.app 을 https://github-readme-stats-chaemin-l.vercel.app 으로 변경하였다.

 

 

✨ 결과

 혹시 나와 같은 에러를 겪고 있는 사람이 있다면 이 글을 보고 GitHub Stats를 예쁘게 나타낼 수 있기를 바란다.