Next.js Discord

Discord Forum

An unexpected error keeping pop up after I ran "next build"

Answered
Chartreux posted this in #help-forum
Open in Discord
ChartreuxOP
.next/types/app/[lng]/colors/single/[slug]/page.ts:26:13
Type error: Type 'OmitWithTag<ParamProps, keyof PageProps, "default">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'children' is incompatible with index signature.
    Type 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode | null' is not assignable to type 'never'.
      Type 'null' is not assignable to type 'never'.

  24 |
  25 | // Check the prop type of the entry function
> 26 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
     |             ^
  27 |
  28 | // Check the arguments and return type of the generateMetadata function
  29 | if ('generateMetadata' in entry) {
   Linting and checking validity of types  ...

There should have nothing wrong with my code , I have tried to delete everything that i can delete ; lol , but the error still keeping pop up
Answered by joulev
type Params = {
  lng: string;
  slug: string;
  theme: string;
};
export type PageProps = {
  params: Params;
  searchParams: Record<string, string | string[] | undefined>;
};
export type LayoutProps = {
  params: Params;
  children: React.ReactNode;
};
View full answer

10 Replies

@joulev first, remove `.next` and rebuild again if it doesn't work, paste all exports of your `page.tsx` file here. the content of those functions/exports you can remove but paste every `export` statements here
ChartreuxOP
import { SingleColorBox } from "./pc.colorbox"
import ColorSideBox from "./pc.sidebox"
import { ColorClipBoard } from "./csr.component"
import { ParamProps } from "@/app/globalType"
const Page = async ({params}: ParamProps) => {
return(
<section className="h-dashboard flex" >
<section className="flex-[0_0_220px] h-dashboard overflow-y-scroll no-scrollbar">
<ColorSideBox lng={params.lng}>
<ColorClipBoard />
</ColorSideBox >
</section>
<section className="flex-[0_0_calc(100%-220px)] h-dashboard overflow-y-auto">
<SingleColorBox />
</section>
</section>
)
}

export default Page , It works totally as well as I expect when i run npm run dev
joulev
what is ParamProps?
@joulev what is `ParamProps`?
ChartreuxOP
import {ReactNode} from 'react'

export type ParamProps = {
params: {
lng: string
slug: string
theme: string
}
children? : ReactNode
}
remove the children?: ReactNode
if you also use this for a layout, then make separate types
joulev
type Params = {
  lng: string;
  slug: string;
  theme: string;
};
export type PageProps = {
  params: Params;
  searchParams: Record<string, string | string[] | undefined>;
};
export type LayoutProps = {
  params: Params;
  children: React.ReactNode;
};
Answer
joulev
a personal promotion but you can use this https://github.com/joulev/nextjs-route-types that i wrote so you don't have to type this manually