From 582070eb7b611215bf7912cfb7195650ae2cbe3e Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Fri, 9 Dec 2022 21:15:57 +0100
Subject: [PATCH] Improve type checking error message for invalid props
 (#43903)

Previously when you have wrong props for a page or layout:

<img width="639" alt="CleanShot 2022-12-09 at 20 27 25@2x"
src="https://user-images.githubusercontent.com/3676859/206782176-a91ec178-a7b7-4e17-b990-a0fe90402ebf.png">

With this PR:

<img width="643" alt="CleanShot 2022-12-09 at 20 27 30@2x"
src="https://user-images.githubusercontent.com/3676859/206782204-4623c830-86e9-4b95-abc9-b0819475a74b.png">

Next step is to generate prop types for named slots.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../lib/typescript/diagnosticFormatter.ts     | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/next/lib/typescript/diagnosticFormatter.ts b/packages/next/lib/typescript/diagnosticFormatter.ts
index dd7a98e0fcf7011..26aeaf7bd395986 100644
--- a/packages/next/lib/typescript/diagnosticFormatter.ts
+++ b/packages/next/lib/typescript/diagnosticFormatter.ts
@@ -62,10 +62,11 @@ function getFormattedLayoutAndPageDiagnosticMessageText(
                   if (types) {
                     main += '\n' + ' '.repeat(indent * 2)
 
-                    if (types[2] === 'PageComponent') {
-                      main += `The exported page component isn't correctly typed.`
-                    } else if (types[2] === 'LayoutComponent') {
-                      main += `The exported layout component isn't correctly typed.`
+                    if (
+                      types[2] === 'PageComponent' ||
+                      types[2] === 'LayoutComponent'
+                    ) {
+                      main += `The exported ${type} component isn't correctly typed.`
                     } else {
                       main += `Expected "${chalk.bold(
                         types[2].replace(
@@ -80,6 +81,20 @@ function getFormattedLayoutAndPageDiagnosticMessageText(
                   main += '\n' + ' '.repeat(indent * 2)
                   main += `Invalid configuration:`
                   break
+                case 2739:
+                  const invalidProp = item.messageText.match(
+                    /Type '(.+)' is missing the following properties from type '(.+)'/
+                  )
+                  if (invalidProp) {
+                    if (
+                      invalidProp[1] === 'LayoutProps' ||
+                      invalidProp[1] === 'PageProps'
+                    ) {
+                      main += '\n' + ' '.repeat(indent * 2)
+                      main += `Prop "${invalidProp[2]}" is incompatible with the ${type}.`
+                    }
+                  }
+                  break
                 case 2559:
                   const invalid = item.messageText.match(/Type '(.+)' has/)
                   if (invalid) {