Question 228929 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Has an invalid "default" export: Type "Props" is not valid

I’m working on a layout page using Next.js. When I run the command yarn build, I encounter the following error:

- info Compiled successfully
- info Linting and checking validity of types ...Failed to compile.

app/[prefName]/create/layout.tsx
Type error: Layout "app/[prefName]/create/layout.tsx" has an invalid "default" export:
  Type "Props" is not valid.

Here’s a snippet of the code that’s causing the issue:

app/[prefName]/create/layout.tsx:

import type { Metadata } from "next";
import { lookupPrefecture } from "@/config/prefectures";

type Props = {
  children: React.ReactNode;
  params: { prefName: string };
  searchParams: { [key: string]: string | string[] | undefined };
};

export async function generateMetadata(
  { params, searchParams }: Props,
): Promise<Metadata> {
  // read route params
  const { prefName } = params;
  const encodedPrefName = decodeURIComponent(prefName);
  const prefectureName = lookupPrefecture(encodedPrefName);

  return {
    title: `${prefectureName} | Create Post`,
    openGraph: {
      images: ["/some-specific-page-image.jpg"],
    },
  };
}

export default function CreateLayout({ children, params, searchParams }: Props) {

  return (
    <>{children}</>
  );
}

compiled typescript type:

// Check the prop type of the entry function
checkFields<Diff<LayoutProps, FirstArg<TEntry['default']>, 'default'>>()

// Check the arguments and return type of the generateMetadata function
if ('generateMetadata' in entry) {
  checkFields<Diff<LayoutProps, FirstArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
  checkFields<Diff<ResolvingMetadata, SecondArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
}

Error on the type

Type 'OmitWithTag<Props, keyof LayoutProps, "generateMetadata">' does not satisfy the constraint '{ [x: string]: never; }'.
  
Property 'searchParams' is incompatible with index signature.
    
Type '{ [key: string]: string | string[] | undefined; }' is not assignable to type 'never'.ts(2344)
type Diff<Base, T extends Base, Message extends string = ""> = 0 extends 1 & T ? {} : OmitWithTag<T, keyof Base, Message>

Could someone please help me understand what’s going wrong here? I’m not sure why the "Props" type is considered invalid in this context.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I tried this and it compiled successfully:

    import type { Metadata } from "next";
import { lookupPrefecture } from "@/config/prefectures";


//URL parameters
type Props = {
  params: { prefName: string };
};

export async function generateMetadata(
  { params }: Props,
  // parent?: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const { prefName } = params;
  const encodedPrefName = decodeURIComponent(prefName);
  const prefectureName = lookupPrefecture(encodedPrefName);

  return {
    title: `${prefectureName} | Make Post`,
    openGraph: {
      images: ["/some-specific-page-image.jpg"],
    },
  };
}

export default function CreateLayout({ children }: {children: React.ReactNode}) {

  return (
    <>{children}</>
  );
}

  2. 0 
    import { Metadata } from "next";
import { lookupPrefecture } from "@/config/prefectures";

type Props = {
  children: React.ReactNode;
  params: { prefName: string };
  searchParams: { [key: string]: string | string[] | undefined };
};

export async function generateMetadata(
   { params, searchParams }: Props,
): Promise<Metadata> {
    // ...
}

function CreateLayout({ children }: Props) { // Adjusted the props destructuring here
 return (
   <>{children}</>
 );
}

export { CreateLayout }; // Exporting CreateLayout

    This code structure should fix your error, I made a minor change to the CreateLayout function by adjusting the props destructuring to only include children, since that’s the only prop you are using within the component.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search