does not satisfy the constraint 'PageProps'. on Server
Unanswered
Satin posted this in #help-forum
SatinOP
Hi,
So im new to NextJS, and im working on some few pages, and I keep getting errors when deploying to Vercel, the error is:
while locally it works, The page in question is:
I am confused.
So im new to NextJS, and im working on some few pages, and I keep getting errors when deploying to Vercel, the error is:
Failed to compile.
app/[lang]/about-us/page.tsx
Type error: Type '{ params: { lang: string; }; }' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type '{ lang: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
Error: Command "npm run build" exited with 1
while locally it works, The page in question is:
type Props = {
params: Promise<{ lang: string }>;
};
export default async function Page(props: Props) {
const { lang } = await props.params;
const dict = await getDictionary(lang);
return (
<div dir={lang === 'ar' ? 'rtl' : 'ltr'} className="bg-gray-50 min-h-screen">
<Navigation lang={lang} />
<main className="py-16">
<section className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-4xl font-bold text-gray-800 mb-6">
{dict.pages.aboutUs.title}
</h1>
<p className="text-lg text-gray-600">
{dict.pages.aboutUs.description}
</p>
</section>
</main>
<Footer lang={lang} />
</div>
);
}
I am confused.
32 Replies
@B33fb0n3 which nextjs version are you using (check your package.json)?
SatinOP
Latest version 15.1.2
@Satin Latest version 15.1.2
can you share your package.json?
@B33fb0n3 can you share your package.json?
SatinOP
Sure one sec
@B33fb0n3 can you share your package.json?
SatinOP
{
"name": "nextjs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@formatjs/intl-localematcher": "^0.5.9",
"@supabase/supabase-js": "^2.47.10",
"@tailwindcss/typography": "^0.5.15",
"lucide-react": "^0.469.0",
"negotiator": "^1.0.0",
"next": "^15.1.2",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwindcss-rtl": "^0.9.0"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@types/negotiator": "^0.6.3",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"autoprefixer": "^10.4.20",
"eslint": "^9",
"eslint-config-next": "15.1.2",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.17",
"typescript": "^5"
}
}
@Satin Hi,
So im new to NextJS, and im working on some few pages, and I keep getting errors when deploying to Vercel, the error is:
Failed to compile.
app/[lang]/about-us/page.tsx
Type error: Type '{ params: { lang: string; }; }' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type '{ lang: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
Error: Command "npm run build" exited with 1
while locally it works, The page in question is:
ts
type Props = {
params: Promise<{ lang: string }>;
};
export default async function Page(props: Props) {
const { lang } = await props.params;
const dict = await getDictionary(lang);
return (
<div dir={lang === 'ar' ? 'rtl' : 'ltr'} className="bg-gray-50 min-h-screen">
<Navigation lang={lang} />
<main className="py-16">
<section className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-4xl font-bold text-gray-800 mb-6">
{dict.pages.aboutUs.title}
</h1>
<p className="text-lg text-gray-600">
{dict.pages.aboutUs.description}
</p>
</section>
</main>
<Footer lang={lang} />
</div>
);
}
I am confused.
are you sure the code on the server is the same code that you have locally? your local code looks good.
the error message says
it could also be the case that the error and the code in question are two different pages. the error is for page
the error message says
{ params: { lang: string; }; }but your local type is
{ params: Promise<{ lang: string }>; }which are not the same, which is why i asked the question.
it could also be the case that the error and the code in question are two different pages. the error is for page
app/[lang]/about-us/page.tsx
@joulev are you sure the code on the server is the same code that you have locally? your local code looks good.
the error message says
> { params: { lang: string; }; }
but your local type is
> { params: Promise<{ lang: string }>; }
which are not the same, which is why i asked the question.
it could also be the case that the error and the code in question are two different pages. the error is for page `app/[lang]/about-us/page.tsx`
SatinOP
Thats my confusion on Vercel. If ur familiar with it. I feel like its not updating my code to the latest.
Im not sure if its that or something else
@Satin Thats my confusion on Vercel. If ur familiar with it. I feel like its not updating my code to the latest.
ive never seen it do that though...
the deployment page on vercel should have a link to the commit from which it builds the app. is that the latest commit in your repository?
the deployment page on vercel should have a link to the commit from which it builds the app. is that the latest commit in your repository?
@joulev ive never seen it do that though...
the deployment page on vercel should have a link to the commit from which it builds the app. is that the latest commit in your repository?
SatinOP
Its showing the last commit. Tho going to source page its not updated
@Satin Its showing the last commit. Tho going to source page its not updated
woah, really bizarre. try making a dummy commit, like updating readme.md, for it to rebuild again. does it work now?
if not, check the source tab and see if the
if not, check the source tab and see if the
{ params: Promise<{ lang: string }>; }
and the dummy commit changes are reflected there.@joulev woah, really bizarre. try making a dummy commit, like updating readme.md, for it to rebuild again. does it work now?
if not, check the source tab and see if the `{ params: Promise<{ lang: string }>; }` and the dummy commit changes are reflected there.
SatinOP
Ill try to do that but i submitted many dummy builds and the commit is shown but source is not its still and older version
you can try rebuilding without cache as well, though i doubt it'll help.
worst case scenario, can always make a new project on vercel.
worst case scenario, can always make a new project on vercel.
@joulev you can try rebuilding without cache as well, though i doubt it'll help.
worst case scenario, can always make a new project on vercel.
SatinOP
I didnt try that cache thing. But yea as a last resort i will do that
Cuz im new to next js i thought im going crazy
yeah no your code is fine, it looks like vercel is going crazy
It is always like this
Cuz i dont wanna shoot myself in the foot like i did with firebase 2 years ago
Asian black bear
@Satin Has this ever been resolved? Were you able to figure out the issue?
@Asian black bear <@150276446621925377> Has this ever been resolved? Were you able to figure out the issue?
SatinOP
Hi, Yes i was able to solve it, i had to change the functions to be like:
somehow it worked
type Props = {
params: Promise<{
[x: string]: string; lang: string
}>;
};
export default async function PostPage(props: Props) ...
somehow it worked
Asian black bear
This is really weird and completely not by design since the type is not correct...
Thanks for letting me know regardless.
@Asian black bear Thanks for letting me know regardless.
SatinOP
no worries
as always, solve one issue and 10 pop up
@Satin Hi,
So im new to NextJS, and im working on some few pages, and I keep getting errors when deploying to Vercel, the error is:
Failed to compile.
app/[lang]/about-us/page.tsx
Type error: Type '{ params: { lang: string; }; }' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type '{ lang: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
Error: Command "npm run build" exited with 1
while locally it works, The page in question is:
ts
type Props = {
params: Promise<{ lang: string }>;
};
export default async function Page(props: Props) {
const { lang } = await props.params;
const dict = await getDictionary(lang);
return (
<div dir={lang === 'ar' ? 'rtl' : 'ltr'} className="bg-gray-50 min-h-screen">
<Navigation lang={lang} />
<main className="py-16">
<section className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-4xl font-bold text-gray-800 mb-6">
{dict.pages.aboutUs.title}
</h1>
<p className="text-lg text-gray-600">
{dict.pages.aboutUs.description}
</p>
</section>
</main>
<Footer lang={lang} />
</div>
);
}
I am confused.
Did you try the original way but deleting the .next folder and node_modules?
Types are generated there, maybe you upgraded without cleaning the cache and types
Types are generated there, maybe you upgraded without cleaning the cache and types
@Satin Hi, Yes i was able to solve it, i had to change the functions to be like:
javascript
type Props = {
params: Promise<{
[x: string]: string; lang: string
}>;
};
export default async function PostPage(props: Props) ...
somehow it worked
This isn’t intuitive, that extra parameter should not exist just to solve a problem :/
@luis_llanes This isn’t intuitive, that extra parameter should not exist just to solve a problem :/
SatinOP
i spent 3 days, this was the only solution
that i found
Then the solution makes no sense, it should be ok with
{ params : Promise<{ lang: string }> }
I’m confused too lol
{ params : Promise<{ lang: string }> }
I’m confused too lol
@luis_llanes Then the solution makes no sense, it should be ok with
{ params : Promise<{ lang: string }> }
I’m confused too lol
SatinOP
it didnt work lol not on vercel anyways