[Next.js] The above error occurred in the **** component 에러 해결

client.js:2 The above error occurred in the <Header> component:

    at Header 
    at LoginContainer 
    at Login
    at div
    at eval 
    at main
    at eval 
    at LoginLayout 
    at AuthProvider 
    at RoutePathProvider 
    at Root 
    at ThemeProvider
    at QueryClientProvider
    at RecoilRoot_INTERNAL
    at RecoilRoot 
    at MyApp 
    at I18nextProvider
    at AppWithTranslation 
    at PathnameContextProviderAdapter 
    at ErrorBoundary 
    at ReactDevOverlay
    at Container 
    at AppContainer
    at Root 

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

 

The above error occurred in the <Header> component

 

Header 컴포넌트는 여러 곳에서 사용하고 있었고 에러 발생은 로그인을 하고 나니 위와 같은 에러가 발생했다.

 

로그인 후 유저 데이터를 가져오는 useQuery를 추가한 뒤부터 발생하고 있다.

 

Header 컴포넌트에서 useQuery에서 받아온 데이터를 사용하는데 데이터가 없을 때 렌더링을 하려고 하니 에러가 발생하는 것으로 추측된다.

 

useQuery를 사용하고있어서 enabled에 조건을 추가하니 에러 없이 동작한다.