Next13 build error `Expected "NameProps", got "PageProps"`

[alimehasin]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:30 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8103
Binaries:
  Node: 18.12.0
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.0.3-canary.0
  eslint-config-next: 13.0.2
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

My project looks like this and all components are server components

.
├── README.md
├── app
│   ├── head.tsx
│   ├── layout.tsx
│   ├── name
│   │   ├── [name]
│   │   │   └── page.tsx
│   │   └── page.tsx
│   └── page.tsx
├── next.config.js
├── package.json
├── tsconfig.json
└── yarn.lock

It works fine when yarn dev but when build the app yarn build got this error

Type error: Page "app/name/[name]/page.tsx" does not match the required types of a Next.js Page.
  Invalid configuration:
    The exported page component isn't correctly typed.
        Expected "NameProps", got "PageProps".

Expected Behavior

The app builds with no issues

Link to reproduction

https://codesandbox.io/s/peaceful-elbakyan-9upb4o?file=/app/name/%5Bname%5D/page.tsx

To Reproduce

Run yarn build

[balazsorban44]

I am unable to reproduce this. :thinking:

The reproduction looks slightly unfinished though, the linked page does not import React, but references it on line 6, the appDir flag is missing in next.config.js. I'm not sure if this is related, but could you make sure that the reproduction is in a proper state and not missing anything? Please test with the latest next@canary as well to make sure that this issue hasn't been fixed already.

[alimehasin]

@balazsorban44, would take a look at this repo to reproduce

[didomenicom]

I am also hitting a similar issue with version 13.0.3-canary.1. My steps to reproduce are

1. npx create-next-app@latest --experimental-app
2. npm install next@canary
3. npm run build (this finishes successfully)
4. Add a /app/blog/[slug]/page.tsx file as defined in the docs.
5. npm run build (this fails)

Type error: Page "app/blog/[slug]/page.tsx" does not match the required types of a Next.js Page.
  Invalid configuration:
    The exported page component isn't correctly typed.
        Expected "{ params: { slug: string; }; searchParams: { id: string; }; }", got "PageProps".

Here is a repo to reproduce. Might also be similar to https://github.com/vercel/next.js/issues/41884

[daveteu]

I am also hitting a similar issue with version 13.0.3-canary.1. My steps to reproduce are

1. npx create-next-app@latest --experimental-app
2. npm install next@canary
3. npm run build (this finishes successfully)
4. Add a /app/blog/[slug]/page.tsx file as defined in the docs.
5. npm run build (this fails)

Type error: Page "app/blog/[slug]/page.tsx" does not match the required types of a Next.js Page.
  Invalid configuration:
    The exported page component isn't correctly typed.
        Expected "{ params: { slug: string; }; searchParams: { id: string; }; }", got "PageProps".

Here is a repo to reproduce. Might also be similar to #41884

I have similar issues but for me, it appears that the type error only exist if searchParams is used.

[didomenicom]

I have similar issues but for me, it appears that the type error only exist if searchParams is used.

Good observation. That seems to be the case for me as well. I could do a successful build with { params, searchParams }: any 🙈

[seung-juv]

I had the same problem Finally, I found a solution.

PageProps required by Nextjs is params?: TParams, searchParams?: TSearchParams

in my way params: TPrams, seachPramas: TSearchParams

An error was occurring because you did not give the optional.

[daveteu]

I had the same problem Finally, I found a solution.

PageProps required by Nextjs is params?: TParams, searchParams?: TSearchParams

in my way params: TPrams, seachPramas: TSearchParams

An error was occurring because you did not give the optional.

Good call, this type is proper, and the solution works.

[shuding]

I'm no longer able to reproduce the issue (using https://github.com/didomenicom/next-13-build-error), I think it was fixed already in latest canary.

[mucahidyazar]

The problem is still continue. I didn't find any correct solution for this problem. I upgraded to the latest version of nextjs and the other vercel packages...

[alimehasin]

Yes @mucahidyazar you are right the problem occur on my side, on this repo, I think we need to reopen the issue

[thematrixl]

Yes I have issues same with @mucahidyazar. I upgraded to the latest version still can't find any solution for this.

[alimehasin]

I'm no longer able to reproduce the issue (using https://github.com/didomenicom/next-13-build-error), I think it was fixed already in latest canary.

@shuding the problem remains even if we upgrade to the latest canary, can you please try to reproduce using this repo https://github.com/alimehasin/next13-build-issue-temp

[seung-juv]

I'm no longer able to reproduce the issue (using https://github.com/didomenicom/next-13-build-error), I think it was fixed already in latest canary.

@shuding the problem remains even if we upgrade to the latest canary, can you please try to reproduce using this repo https://github.com/alimehasin/next13-build-issue-temp

According to the solution I wrote, you need to specify a choice so that there will be no build error. Please check what I wrote above.

/src/app/name/[name]/page.tsx

export interface NameProps {
  // params: { name: string }; // cannot require should be optional
  params?: { name: string };
  // searchParams: any; // cannot require should be optional
  searchParams?: any;
}

const Name: React.FC<NameProps> = ({ params, searchParams }) => {
  console.log(params);
  console.log(searchParams);

  return (
    <div>
      <h1>
        Hello, {params.name.substring(0, 1).toUpperCase()}
        {params.name.substring(1)}
      </h1>
    </div>
  );
};

export default Name;

Try it

[alimehasin]

@kingsky32 thanks for your answer, I think this is a good workaround

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.