-
SummaryReact v18.2.0 While trying to deploy, I kept receiving an error message: The only way I could resolve it was by adding types property to children like so: But this isn't what's in the documentation to do. Can anyone help me understand why this happened? I manually added Next.js to an existing project if that detail helps any. Additional informationType error: Type '{ children: ReactNode; }' does not satisfy the constraint 'LayoutProps'.
Property 'types' is missing in type '{ children: ReactNode; }' but required in type 'LayoutProps'.ExampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 7 replies
-
|
Do you have a parallel route called Perhaps something like this: 
That'll trigger this, expected, error: src/app/layout.tsx
Type error: Type '{ children: ReactNode; }' does not satisfy the constraint 'LayoutProps'.
Property 'types' is missing in type '{ children: ReactNode; }' but required in type 'LayoutProps'.And that's because of how Parallel Routes work: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes |
Beta Was this translation helpful? Give feedback.
-
|
what?? And where's the solution????? I know that Parallel Routes, so what? |
Beta Was this translation helpful? Give feedback.
-
|
Can some please answer with a solution as well? |
Beta Was this translation helpful? Give feedback.
-
|
LoL |
Beta Was this translation helpful? Give feedback.
-
|
For the ones still encountering this error, this is what fixed it for me (In my case I got the error when I wanted to add the locale as a prop). in layout.tsx I've:
import { Geist, Geist_Mono } from "next/font/google";
import "../globals.css";
type Params = Promise<{ locale: string }>;
export async function generateMetadata({params}: {params: Params}) {
const {locale} = await params;
console.log(locale);
return {
title: "ProjectName",
description: "ProjectDescription",
}
}
export default async function RootLayout({children, params}: {children: React.ReactNode, params: Params}) {
const {locale} = await params;
return (
<html lang={locale}>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
} |
Beta Was this translation helpful? Give feedback.
-
|
This is the answer, thank you!
|
Beta Was this translation helpful? Give feedback.
-
|
Nide sure you don't accidently have children: React.ReactDOM, instead of children: React.ReactNode |
Beta Was this translation helpful? Give feedback.
Do you have a parallel route called
@typesunderapp?Perhaps something like this:
That'll trigger this, expected, error:
And that's because of how Parallel Routes work: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes