Question 73388 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Why do I get "Error: Abort fetching component for route: "/settings"" in next js? – Reactjs

this is my next js index file. Here i have used next-auth version 4 library.

import React from 'react'
import { useRouter } from 'next/router'
import { useSession } from 'next-auth/react'
import { Login } from '@/components/Login/Login'

export default function Home() {
  const router = useRouter()
  const callbackUrl = (router.query?.callbackUrl as string) ?? '/dashboard'
  const { data: session, status } = useSession()

  const loading = status === 'loading'
  if (!loading && !session) {
   return <Login />
  }
  if (session) {
   router.push(callbackUrl)
  }
}

I have passed a custom login page for the sigin. It was achieved by setting the page inside […nextauth].ts file

pages: {
  signIn: '/'
}

Above custom login page contain below button with an onclick event for the sign in.

<Button
  onClick={(e) => {
    e.preventDefault()
    signIn('cognito', { redirect: false })
  }}
  appearance={appearance}
  style={{ fontWeight: 'bold' }}
>

But after the sign in, it’s correctly redirected to the requested page, but there is an error in the console:

Error: Abort fetching component for route: "/settings"

How to fix this issue?

Tags:

2

Answers


  1. 0

    Abort fetching component for route

    This happens when calling router.push() from the main rendering flow as you are doing here :

    if (session) {
  router.push(callbackUrl)
}

    I see you are trying to check if the session is loading but this is not the right approach to do so

    What you need to do is create a wrapper component that handles session loading and decides whether to return its children or a custom component (loading) while the session is loading.

    Here is an answer where this is explained in detail.

    Login or Signup to reply.
  2. 0

    it’s because router.push() runs multiple times before it finishes loading the earlier router.push(). I think below is a better answer. it has some worked out solutions.

    Here is an answer where this is explained in detail.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search