Params doesn't satisfy promise
Answered
LaPerm posted this in #help-forum
LaPermOP
app/[lang]/menu/food/main-menu/page.tsx
Type error: Type '{ params: Params; }' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type 'Params' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
Next.js build worker exited with code: 1 and signal: nullheyy so has anyone ever had that? it happens when running
npm run build, the website works fine under npm run devAnswered by Anay-208 | Ping in replies
type Language = "en" | "bg";
type Params = { lang: Language };
// this is a STATIC website, and this will help debug
export const dynamic = "force-static";
export function generateStaticParams(): Params[] {
return (["en", "bg"] as const).map((lang) => ({ lang }))
}
export default async function MainMenuPage({ params }: { params: Promise<Params> }) {
const { lang } = await params;
return <>
{lang}
</>
}60 Replies
LaPermOP
import MainMenuPageBase from "@/components/MainMenuPageBase";
import { menuItems } from "@/lib/menu-data";
import { Language } from "@/types/content";
export type Params = { lang: Language, section: string };
export function generateStaticParams(): Params[] {
return (["en", "bg"] as const).flatMap((lang) => {
return [...Object.keys(menuItems[lang]), "new", "best-sellers"].map((section) => ({ section, lang }))
})
}
export default function SectionPage({ params }: { params: Params }) {
const { lang, section } = params;
return (<>
<MainMenuPageBase lang={lang} section={section} />
</>);
}@LaPerm tsx
import MainMenuPageBase from "@/components/MainMenuPageBase";
import { menuItems } from "@/lib/menu-data";
import { Language } from "@/types/content";
export type Params = { lang: Language, section: string };
export function generateStaticParams(): Params[] {
return (["en", "bg"] as const).flatMap((lang) => {
return [...Object.keys(menuItems[lang]), "new", "best-sellers"].map((section) => ({ section, lang }))
})
}
export default function SectionPage({ params }: { params: Params }) {
const { lang, section } = params;
return (<>
<MainMenuPageBase lang={lang} section={section} />
</>);
}
import MainMenuPageBase from "@/components/MainMenuPageBase";
import { menuItems } from "@/lib/menu-data";
import { Language } from "@/types/content";
export type Params = { lang: Language, section: string };
export function generateStaticParams(): Params[] {
return (["en", "bg"] as const).flatMap((lang) => {
return [...Object.keys(menuItems[lang]), "new", "best-sellers"].map((section) => ({ section, lang }))
})
}
export default async function SectionPage({ params }: { params: Params }) {
const pt = await params;
const { lang, section } = pt;
return (<>
<MainMenuPageBase lang={lang} section={section} />
</>);
}@LaPerm
Asian black bear
Just slapping await without any explanation won't help at all.
OP: Next 15 expects params to be a promise so your
OP: Next 15 expects params to be a promise so your
Params should be Promise<{ lang: Language, section: string }>. Then in the page component you have to await as suggested in the previous message.LaPermOP
what about generateStaticParams?
import MainMenuPageBase from "@/components/MainMenuPageBase";
import { menuItems } from "@/lib/menu-data";
import { Language } from "@/types/content";
type Params = { lang: Language, section: string };
export function generateStaticParams(): Params[] {
return (["en", "bg"] as const).flatMap((lang) => {
return [...Object.keys(menuItems[lang]), "new", "best-sellers"].map((section) => ({ section, lang }))
})
}
export default async function SectionPage({ params }: { params: Promise<Params> }) { // added Promise<T> here
const { lang, section } = await params; // added await
return (<>
<MainMenuPageBase lang={lang} section={section} />
</>);
}❯ npm run build
> almost-famous@0.1.0 build
> next build
▲ Next.js 15.2.2
Creating an optimized production build ...
✓ Compiled successfully
Linting and checking validity of types .Failed to compile.
app/[lang]/menu/food/main-menu/page.tsx
Type error: Type '{ params: Params; }' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type 'Params' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
Next.js build worker exited with code: 1 and signal: nulldid you save the file
There is a bug when sometimes file don't save. try restarting system
LaPermOP
bug where
I'm using vim
ummm, try to confirm if the file is saved, then try restarting system
LaPermOP
so yeah the file is saved
it might be happening in some other file?
LaPermOP
it's linux come on
I don't need to restart the computer to restart the process
try deleting
.next folderLaPermOP
I did that too
didn't help
both .next and /out
LaPermOP
I've been battling this for 3 hours yesterday
LaPermOP
I was actually pasting the wrong one, sorry
// ❯ cat ./app/\[lang\]/menu/food/main-menu/page.tsx -p
import MainMenuPageBase from "@/components/MainMenuPageBase";
import { Language } from "@/types/content";
// this is a STATIC website, and this will help debug
export const dynamic = "force-static";
export const dynamicParams = false;
type Params = { lang: Language };
export function generateStaticParams(): Params[] {
return (["en", "bg"] as const).map((lang) => ({ lang }))
}
export default async function MainMenuPage({ params }: { params: Promise<Params> }) {
const { lang } = await params;
return <>
<MainMenuPageBase lang={lang} section={null} />
</>
}thats why I just asked if its the write file.
LaPermOP
yeaah I was editing the correct one though
but sure, I even included the "cat" comand to confirm
so now it's 100% this one
LaPermOP
what?
srsly?
but it's a type alias
why does this thing care
The error is a type error. I just want to see if its a issue with that.
LaPermOP
i mean sure I'm not criticizing
it would just be absurd
❯ cat ./app/\[lang\]/menu/food/main-menu/page.tsx -p
import MainMenuPageBase from "@/components/MainMenuPageBase";
import { Language } from "@/types/content";
type Params = { lang: string };
export function generateStaticParams(): Params[] {
return (["en", "bg"] as const).map((lang) => ({ lang }))
}
export default async function MainMenuPage({ params }: { params: Promise<Params> }) {
const { lang } = await params;
return <>
<MainMenuPageBase lang={lang as Language} section={null} />
</>
}✦ ❯ npm run build
> almost-famous@0.1.0 build
> next build
▲ Next.js 15.2.2
Creating an optimized production build ...
✓ Compiled successfully
Linting and checking validity of types ..Failed to compile.
app/[lang]/mobile-menu/food/main-menu/page.tsx
Type error: Page "app/[lang]/mobile-menu/food/main-menu/page.tsx" has an invalid "default" export:
Type "Params" is not valid.
Next.js build worker exited with code: 1 and signal: nullI'll check this out locally once I'm free
Can you send your eslint file?
LaPermOP
✦ ❯ cat ./.eslintrc.json -p
{
"extends": [
"next/core-web-vitals",
"next/typescript"
]
}it was automatically generated...
So I tried locally, and everything worked fine for me
LaPermOP
hm
Can you create a [min repro repo](https://nextjs-faq.com/minimal-reproduction-repository)
This is my code. only difference is the element.
My output is static
LaPermOP
could you please paste that code?
I'll try it
type Language = "en" | "bg";
type Params = { lang: Language };
// this is a STATIC website, and this will help debug
export const dynamic = "force-static";
export function generateStaticParams(): Params[] {
return (["en", "bg"] as const).map((lang) => ({ lang }))
}
export default async function MainMenuPage({ params }: { params: Promise<Params> }) {
const { lang } = await params;
return <>
{lang}
</>
}Answer
LaPermOP
ok this fixes it, thank you very much
I didn't notice the error changed to a different file (very similarily named)
well, thing is it's not my project I'm helping a friend
I'm just a little confused how did it fix because the only difference is the type of Language
@LaPerm it would just be absurd
and in this case, it was not, you probably used maybe a object in type of language