dinislam Posts - Answer Overflow

dinislam

•Created by dinislam on 8/4/2023 in #questions

shadcn/ui is unusable due to Type Errors

Hey folks! I'm trying to use shadcn/ui for a project and keep on running into type error in many components. These are components written by shadcn and not my code. Example with the Dialog:

Type 'ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLParagraphElement>>' does not satisfy the constraint 'keyof IntrinsicElements | ForwardRefExoticComponent<any> | (new (props: any) => Component<any, {}, any>) | ((props: any, context?: any) => ReactElement<...> | null)'.
  Type 'ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLParagraphElement>>' is not assignable to type 'ForwardRefExoticComponent<any>'.
    Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | null'.ts(2344)

Type 'ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLParagraphElement>>' does not satisfy the constraint 'keyof IntrinsicElements | ForwardRefExoticComponent<any> | (new (props: any) => Component<any, {}, any>) | ((props: any, context?: any) => ReactElement<...> | null)'.
  Type 'ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLParagraphElement>>' is not assignable to type 'ForwardRefExoticComponent<any>'.
    Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | null'.ts(2344)

A similar error exists in many others. Seems to be a pattern in using forwardRef with Radix components. Any idea on how to fix?

3 replies

TTCTheo's Typesafe Cult

•Created by dinislam on 6/25/2023 in #questions

Next.js App Directory redirecting POST route (oauth, sign in with google)

Hey folks! I'm implementing "Sign in with Google" using the Google Identity Services (GIS) package and these docs: https://developers.google.com/identity/gsi/web/guides/overview The TLDR is they provide a JS script and an HTML button. Once someone presses the button and authenticates successfully, GIS sends a POST request to URI that I give with the credential, csrf tokens etc. At the end of the post request, I want to redirect the user to a different page and also set a session cookie. The following code works, but I'm wondering if there's a more "idiomatic" (correct) way of doing it? I have tried using NextResponse.redirect() but it just hangs the backend. I'm using Next.js 13.4.7 and the App directory.

export async function POST(request: NextRequest) {
        /* ... CSRF validation */

        /* ... save user to database etc */

        const response = new NextResponse(null, {
            status: 303,
        });
        response.headers.set("Location", new URL("/", 
request.url).href);
        response.cookies.set({
            name: "session",
            value: "abc123",
            sameSite: "lax",
            httpOnly: true,
            maxAge: 60 * 60,
        });
    
        return response;
}

export async function POST(request: NextRequest) {
        /* ... CSRF validation */

        /* ... save user to database etc */

        const response = new NextResponse(null, {
            status: 303,
        });
        response.headers.set("Location", new URL("/", 
request.url).href);
        response.cookies.set({
            name: "session",
            value: "abc123",
            sameSite: "lax",
            httpOnly: true,
            maxAge: 60 * 60,
        });
    
        return response;
}

2 replies

TTCTheo's Typesafe Cult

•Created by dinislam on 6/20/2023 in #questions

How to use Datadog APM with Next.js on Vercel?

Hey folks! I'm trying to configure Datadog's APM to work with Next.js on Vercel. As far as I understand, running dd-trace requires a Datadog "agent" to be installed on the target platform. I'm assuming that it's not possible on Vercel, so I'm wondering if there's a workaround for that?

5 replies

TTCTheo's Typesafe Cult

•Created by dinislam on 6/11/2023 in #questions

How to server-render (SSR) a client component using Next.js app router?

Hey folks, This question might seem a little confusing. I'm learning about the app router and I'm wondering how I can achieve server-side rendering of the client components in the app router? I want the client component first render to be server-side, then the client component gets hydrated, then the subsequent rerenders will be client-side. This is needed for SEO. I've been looking at this app router example: https://netflx-web.vercel.app/ (source: https://github.com/sadmann7/netflx-web). What I noticed is that if you disable javascript, the website doesn't show the list of shows. Ideally, I would like this to show a list of shows even if JS is disabled.

5 replies

TTCTheo's Typesafe Cult

•Created by dinislam on 2/21/2023 in #questions

Customize QueryClient for TRPC?

👋 I’m using T3 for a project. Is it possible to pass a custom QueryClient to TRPC? I don’t like some of the defaults of react-query refetch logic and would like to set my preferences globally rather than per query

5 replies

TTCTheo's Typesafe Cult

•Created by dinislam on 11/10/2022 in #questions

Typescript React Component Props Error

19 replies

Gaming

Programming