[supabase] TypeError: Failed to fetch at _0x979e43.<computed> / AuthRetryableFetchError

 

Error

VM8273:1 TypeError: Failed to fetch
    at _0x979e43.<computed> (eval at <anonymous> (_next/static/chunks/…1716615383433:11:76), <anonymous>:1:42469)
    at eval (webpack-internal:///…b/helpers.js:108:25)
    at _handleRequest (webpack-internal:///…lib/fetch.js:109:24)
    at _request (webpack-internal:///…/lib/fetch.js:99:24)
    at SupabaseAuthClient.signInWithPassword (webpack-internal:///…rueClient.js:346:81)
    at async SignInWithEmail (webpack-internal:///…nWithEmail.tsx:6:33)
    at async onClick (webpack-internal:///…gin/page.tsx:165:41)
SignInWithEmail.tsx:10 

SignInWithEmail.tsx:15 AuthRetryableFetchError: Failed to fetch
    at _handleRequest (webpack-internal:///…lib/fetch.js:114:15)
    at async _request (webpack-internal:///…/lib/fetch.js:99:18)
    at async SupabaseAuthClient.signInWithPassword (webpack-internal:///…rueClient.js:346:23)
    at async SignInWithEmail (webpack-internal:///…nWithEmail.tsx:6:33)
    at async onClick (webpack-internal:///…gin/page.tsx:165:41)

 

 

어제 저녁에 해결하려다 짜잉나서 담날 스텍오버플로우 뒤져가며 해결

(GPT3.5는 몰라잉)

 

 

 

 

solve

e.preventDefault();를 사용하는 이유는 
기본 이벤트 동작을 막기 위해서입니다. 
특히, 폼 제출이나 링크 클릭 같은 이벤트에서 유용합니다.

onClick 핸들러에서 e.preventDefault();를 사용하면, 
해당 이벤트의 기본 동작(예를 들어 폼 제출 버튼 클릭 시 폼이 제출되는 동작)을 막아주고, 
우리가 정의한 커스텀 동작을 수행할 수 있게 됩니다.

이 경우, SignInWithEmail 함수가 호출되면서 
로그인 처리가 되기 전에 폼이 실제로 제출되는 것을 방지하기 위해 사용됩니다. 
예를 들어, 폼이 제출되면 페이지가 리로드되거나 다른 페이지로 이동할 수 있는데, 
이를 막고 JavaScript로 정의한 로직이 실행되도록 합니다.

 

 

 

 

form, submit으로 되있는걸 까먹었냐~~ 바부양

아무튼 해결할땐 언제나 기부니가 조크든용 ^0^

 

혹시나 같은 문제로 글 보는 분들 있다면

form태그 내에 submit 버튼으로 하지는 않았는지, 그랫다면  e.preventDefault() 빼먹진 않았는지 체크해주시용

 

+) 추가로 supabse auth가 v1, v2 있어서 함수명이 약간씩 다르니 각자 쓰는 버전에 맞게도 함수명 체크해보세영