NextJS Build Failed to Compile.
Unanswered
bray posted this in #help-forum
brayOP
I was trying to deploy my first personal project on Vercel until it came out with some errors on the params thing. I've tried many solutions to fix this build issue, but this fight has prolonged for hours and made me raise the white flag 🏳️. Any kind of help is kindly appreciated 🙂.
this is the error message I got :
src/app/details/[id]/page.tsx
Type error: Type '{ params: { id: string; }; }' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type '{ id: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
this is the error message I got :
src/app/details/[id]/page.tsx
Type error: Type '{ params: { id: string; }; }' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type '{ id: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
14 Replies
@Yi Lon Ma diff
-params:{id:string}
+params:Promise<{id:string}>
brayOP
Tried it, and resulted with a new error like :
.next/types/app/details/[jobId]/page.ts:34:13
Type error: Type 'OmitWithTag<{ jobId: Params; }, keyof PageProps, "default">' does not satisfy the constraint '{ [x: string]: never; }'.
Property 'jobId' is incompatible with index signature.
Type 'Params' is not assignable to type 'never'.
.next/types/app/details/[jobId]/page.ts:34:13
Type error: Type 'OmitWithTag<{ jobId: Params; }, keyof PageProps, "default">' does not satisfy the constraint '{ [x: string]: never; }'.
Property 'jobId' is incompatible with index signature.
Type 'Params' is not assignable to type 'never'.
1. It should be
2. your way of getting jobId is incorrect
params:Params and not params:{jobId:Params}2. your way of getting jobId is incorrect
const awaited = await params
const jobId = awaited.jobId@Yi Lon Ma 1. It should be `params:Params` and not `params:{jobId:Params}`
2. your way of getting jobId is incorrect
ts
const awaited = await params
const jobId = awaited.jobId
brayOP
I'm sorry but this came out with another type of error :
.next/types/app/details/[jobId]/page.ts:34:13
Type error: Type 'OmitWithTag<Params, keyof PageProps, "default">' does not satisfy the constraint '{ [x: string]: never; }'.
Property 'then' is incompatible with index signature.
Type '<TResult1 = { jobId: string; }, TResult2 = never>(onfulfilled?: ((value: { jobId: string; }) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | null | undefined) => Promise<...>' is not assignable to type 'never'.
.next/types/app/details/[jobId]/page.ts:34:13
Type error: Type 'OmitWithTag<Params, keyof PageProps, "default">' does not satisfy the constraint '{ [x: string]: never; }'.
Property 'then' is incompatible with index signature.
Type '<TResult1 = { jobId: string; }, TResult2 = never>(onfulfilled?: ((value: { jobId: string; }) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | null | undefined) => Promise<...>' is not assignable to type 'never'.
it should be
export default async function DetailPage({params:Params})ahh mb
{params}:{params:Params}@Yi Lon Ma ahh mb
{params}:{params:Params}
brayOP
ahh.. it sure does remove the error, but another came up 😭😭
.next/types/app/page.ts:34:29
Type error: Type '{ searchParams?: { q?: string | undefined; } | undefined; }' does not satisfy the constraint 'PageProps'.
Types of property 'searchParams' are incompatible.
Type '{ q?: string | undefined; } | undefined' is not assignable to type 'Promise<any> | undefined'.
Type '{ q?: string | undefined; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
.next/types/app/page.ts:34:29
Type error: Type '{ searchParams?: { q?: string | undefined; } | undefined; }' does not satisfy the constraint 'PageProps'.
Types of property 'searchParams' are incompatible.
Type '{ q?: string | undefined; } | undefined' is not assignable to type 'Promise<any> | undefined'.
Type '{ q?: string | undefined; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
this is related to search params from different page
search params are also now a promise
@Yi Lon Ma search params are also now a promise
brayOP
THANKYOU YI LON MA!!! This is my first project, and I'm still learning NextJS, I wish I knew this sooner, I wouldn't spend 4 hours trying to figure it out on stack overflows. ONCE AGAIN THANKYOUU ! 🥲