SoYoung210
배포 완료 후 페이지 에러 관련 도움 요청드립니다.
안녕하세요 개발자님! 6월에 결혼식을 앞두고 있는 한일 국제커플입니다 :) 인스타그램 형태의 모바일청첩장을 찾다가 소영님께서 만드신 개발후기 글을 읽고 이곳까지 오게되었습니다..ㅎㅎ 웹코딩은 전혀 문외한이었던 저도 적어주신 템플릿 사용 메뉴얼과 구글링을 통해 혼자서 deploy까지 완료하게 되었습니다..ㅎㅎㅎ 지나고보면 간단한 과정이었는데 기초가 없는 상태에서 많이 해매면서 시행착오가 있었네요. 마지막까지 문제없이 성공했으면 정말 좋았을텐데..ㅜㅜ 한가지 에러가 있어서 도움을 요청드리고자 이렇게 문의를 남깁니다.
2가지 조건에서 해당 템플릿을 이용하여 컴파일했을때 웹에서 같은 현상이 발생했습니다.
- Windows 10 명령 프롬프트 환경(Next.js - node :16.14.2 version)
앞서 supabase 프로젝트의 환경변수(.env.local) -> main폴더에 생성, public/assets/data/*.json 수정, public/img 수정 npm run dev 후 컴파일 이상없이 진행 되며 localhost 로 접속하면 처음 잠깐동안 청첩장 화면이 정상적으로 나왔다가 바로 에러 문구가 발생합니다. Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'length') 경로는 .next\static\chunks\pages\index.js .next\static\chunks\main.js 안에서 발생하는 문제인데 구글링 통해 해당 *.js파일을 수정해보았지만 마찬가지였습니다. 결국 수정하더라도 컴파일을 새로하면 .next 폴더 내 파일은 초기화되어 소용없음을 알게되었네요..ㅜㅜ 두번째 시도로 에러를 무시하고 vercel을 통해 배포를 바로 시도해 보기로 했습니다.
- Vercel Vercel 계정 생성 및 github 프로젝트 연결 + Environment Variables 값(supabase anon, URL) 추가 배포 후 생성된 웹페이지를 들어가면 마찬가지로 처음 잠깐동안 청첩장 화면이 나왔다가 바로 에러 문구가 나옵니다. (Application error: a client-side exception has occurred ([developer guidance]) 웹 개발자 콘솔을 열어 확인해보면 마찬가지로
- TypeError: Cannot read properties of null (reading 'length') - 에러 6건
- https://ietepoahbepwjtrkbbml.supabase.co/rest/v1/comments?select=id%2CfeedId%2Cmessage%2CcreateAt&feedId=eq.999&order=id.desc.nullslast -3건이 발생되며 해당 링크에 들어가면 → Kong error No API key found in request. 가 출력됩니다.
혹시 제가 환경변수 입력하는 부분 Supabase API 값을 잘못주었거나 Supabase 프로젝트 설정이 잘못되어서 그런 에러가 발생하는 건지..아니면 혹시 다른 놓친부분이 있는지 피드백주시면 정말로 감사하겠습니다! ㅜㅜ
Hello, @yooseon0611 Unfortunately, it is difficult to guess what kind of error it is based on the information you wrote down.
As you mentioned, I recommend you to comment out and redistribute all Supabase connections to see if the cause is correct. Still, if the same error occurs, other parts will be the cause.
If possible, I would appreciate it if you could leave me a reproducible Repository address.
안녕하세요! 지난번 문의에 이어 해결이 안되어 재문의드립니다..ㅜㅜ 지난 2일에 관련하여 메일을 드렸는데 아직 확인을 못하신것같아, 이곳에 코멘트를 한번 더 남기게되었습니다. 스스로 해결해보려고 노력해보았지만, 도저히 안될것같아..다시 문의드리게 되었네요. 환경변수 설정이 문제의 원인이라고 하면, 제가 행한것이 맞는지 확인을 부탁드리겠습니다.
- ( supabase의 ANON KEY, URL 이 들어간) .local.env 생성
- Vecel 배포시 환경변수( supabase의 ANON KEY, URL) 설정 완료 두가지 외에 혹시 놓친부분이 있는지 도와주시면 감사하겠습니다!
기본템플릿만이라도 배포 후에 정상적으로 열리고나면 public 폴더 내 파일 수정을 통해 청첩장을 만들려고 합니다. 바쁘실텐데 기초적인 질문을 드리는 것 같아 죄송합니다..ㅜㅜ