Client error

Answered

Akita posted this in #help-forum

Open in Discord

AkitaOP

2024-01-09T11:23:33.000Z

Hi! I have a problem. I have suspense put on children in the layout, and in page.tsx a check to see if it has access to see it. In case it doesn't have access, I give it redirect('/').
The problem is that in production I get client error when I have to give redirect, why?

Answered by Ray

try to keep the layout simple first

View full answer

91 Replies

@Akita Hi! I have a problem. I have suspense put on children in the layout, and in page.tsx a check to see if it has access to see it. In case it doesn't have access, I give it redirect('/'). The problem is that in production I get client error when I have to give redirect, why?

2024-01-09T11:25:09.000Z

what client error you got?

AkitaOP

2024-01-09T11:26:24.000Z

@Akita Hi! I have a problem. I have suspense put on children in the layout, and in page.tsx a check to see if it has access to see it. In case it doesn't have access, I give it redirect('/'). The problem is that in production I get client error when I have to give redirect, why?

2024-01-09T11:27:14.000Z

could you show some code on page.tsx?

AkitaOP

2024-01-09T11:30:45.000Z

page.tsx

layout.tsx

@Akita Click to see attachment

2024-01-09T11:33:54.000Z

no error on dev?

maybe the error is coming from AdminPerms.hasAdminAccess()?

AkitaOP

2024-01-09T11:36:00.000Z

No, bcs when i remove

suspense it works

and i got that error also for 404 page

2024-01-09T11:36:49.000Z

oh how about remove the suspense and create a loading.tsx?

AkitaOP

2024-01-09T11:36:58.000Z

i did it

or

2024-01-09T11:37:30.000Z

do you get error with loading.tsx?

AkitaOP

2024-01-09T11:37:34.000Z

yes

2024-01-09T11:38:26.000Z

anything in the browser console?

AkitaOP

2024-01-09T11:39:33.000Z

if i have a loading.tsx file i dont need to use suspense?

2024-01-09T11:39:38.000Z

do you get error if you just call redirect there like this

export default function Page() {
  redirect("/?error=You do not have permission to access this page.");

  return ....
}

@Akita if i have a `loading.tsx` file i dont need to use suspense?

2024-01-09T11:39:50.000Z

yes because loading.tsx do that for you

it is better to use loading.tsx because next will prefetch it

AkitaOP

2024-01-09T11:42:35.000Z

i will try that

thx

2024-01-09T11:42:44.000Z

no prob

AkitaOP

2024-01-09T11:52:20.000Z

When I go to a 404 page and try to click on the "Home" link, it takes a very long time, and from what I see in the console, it somehow gives a POST on the 404 route before going to the first page.

@Ray

@Akita When I go to a 404 page and try to click on the "Home" link, it takes a very long time, and from what I see in the console, it somehow gives a POST on the 404 route before going to the first page.

2024-01-09T11:53:22.000Z

do you have middleware.ts?

AkitaOP

2024-01-09T11:53:55.000Z

middleware.ts with withAuth from next-auth

And when i try to go to a page with redirect('/')

@Akita Click to see attachment

AkitaOP

2024-01-09T11:54:25.000Z

like it

i got this Error: Minified React error #310; visit https://reactjs.org/docs/error-decoder.html?invariant=310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

@Akita middleware.ts with withAuth from next-auth

2024-01-09T11:55:02.000Z

could you rename the middlware.ts to _middleware.ts and try again?

@Ray could you rename the middlware.ts to _middleware.ts and try again?

AkitaOP

2024-01-09T11:57:24.000Z

It still does

@Akita When I go to a 404 page and try to click on the "Home" link, it takes a very long time, and from what I see in the console, it somehow gives a POST on the 404 route before going to the first page.

2024-01-09T11:59:02.000Z

do you mean when you click a link for home page and it cause this error with the POST request?

AkitaOP

2024-01-09T11:59:14.000Z

yes, from 404 page

2024-01-09T11:59:28.000Z

oh only in the 404 page right?

AkitaOP

2024-01-09T11:59:46.000Z

i think so

2024-01-09T12:00:15.000Z

<Link href='/'>Home</Link> like this?

AkitaOP

2024-01-09T12:00:29.000Z

yes

@Akita Click to see attachment

2024-01-09T12:00:42.000Z

this is the home page?

AkitaOP

2024-01-09T12:00:55.000Z

no

That s the homepage

2024-01-09T12:02:47.000Z

hard to tell what happen, is the project on github which can share?

AkitaOP

2024-01-09T12:03:19.000Z

i cant share it ðŸ˜¦

@Akita Click to see attachment

2024-01-09T12:04:51.000Z

it is odds to see this error when you try to navigate to home

AkitaOP

2024-01-09T12:05:07.000Z

The main problem wouldn't be that with 404, the problem would be on pages where I have admin restriction.
There, when it wants to enter and I have suspense or loading.tsx, I get client error, then it redirects me.
When I don't have loading.tsx or suspense, it works without problem.

2024-01-09T12:06:37.000Z

what error you get? do you see anything in browser console and server console?

@Akita i got this Error: Minified React error #310; visit https://reactjs.org/docs/error-decoder.html?invariant=310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

AkitaOP

2024-01-09T12:07:35.000Z

that s what i see in console

just for 1 sec

Then redirect me to '/'

2024-01-09T12:08:29.000Z

can you show the code in AdminPerms.hasAdminAccess()?

have you tried it without executing AdminPerms.hasAdminAccess()?

AkitaOP

2024-01-09T12:09:16.000Z

i tried it without loading.tsx and it works

2024-01-09T12:10:23.000Z

export default async function Page() {
   const session = await getAuth()

   if (!session) redirect("/?....")

   return ...
}

like this?

and it only work without loading.tsx?

AkitaOP

2024-01-09T12:10:50.000Z

Yes

it works without loading.tsx

2024-01-09T12:11:32.000Z

export default async function Page() {
   redirect("/?....")

   return ...
}

does this work with loading.tsx?

AkitaOP

2024-01-09T12:11:54.000Z

1 sec, i will create another page for test

2024-01-09T12:12:00.000Z

ok

AkitaOP

2024-01-09T12:14:30.000Z

Still not working

@Akita i got this Error: Minified React error #310; visit https://reactjs.org/docs/error-decoder.html?invariant=310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

2024-01-09T12:14:33.000Z

maybe this error come from one of the provider

AkitaOP

2024-01-09T12:14:39.000Z

import { redirect } from "next/navigation"

export default async function Page() {
    redirect('/')
    return <></>
}

2024-01-09T12:15:13.000Z

can you try it with the provider comment out?

the authprovider maybe

AkitaOP

2024-01-09T12:15:50.000Z

authprovider is just with sessionProvider from next-auth

@Akita authprovider is just with sessionProvider from next-auth

2024-01-09T12:16:17.000Z

ah ok

2024-01-09T12:16:47.000Z

try to keep the layout simple first

Answer

AkitaOP

2024-01-09T12:17:52.000Z

1 sec, i removed uiprovider and authprovider

2024-01-09T12:18:14.000Z

like commenting out InsertingItemsLoader ToasterComponent

ok

AkitaOP

2024-01-09T12:27:40.000Z

thx

2024-01-09T12:28:04.000Z

oh nice, so which part cause the error?

AkitaOP

2024-01-09T12:28:19.000Z

inserting new items component

2024-01-09T12:28:35.000Z

ah ok

AkitaOP

2024-01-09T12:28:55.000Z

it is client component, i need to check it with a state if isClient is true

2024-01-09T12:28:55.000Z

that's make sense, that's why you made a POST request

AkitaOP

2024-01-09T12:29:03.000Z

i made a hook

for that

thx

2024-01-09T12:29:22.000Z

no prob

AkitaOP

2024-01-09T12:29:33.000Z

404 page still not working

@Akita 404 page still not working

2024-01-09T12:30:06.000Z

what is not working?

AkitaOP

2024-01-09T12:38:41.000Z

i made a custom 404 page and it works, problem solved

thx again