From c806f10ed8d22dcfcab43b2fd0a5a6769c05e057 Mon Sep 17 00:00:00 2001
From: "Craig S. Keogh" <craig.s.keogh@gmail.com>
Date: Thu, 26 May 2022 21:06:05 +0930
Subject: [PATCH] Fix typescript examples error

Fix error:
[0] src/App.tsx(9,34): error TS2769: No overload matches this call.
[0]   Overload 1 of 2, '(props: (RouteProps<string, { [x: string]: string; }> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string; }>>) | Readonly<RouteProps<string, { ...; }> & OmitNative<...>>): Route<...>', gave the following error.
[0]     Type 'typeof Home' is not assignable to type 'ComponentType<RouteComponentProps<any, StaticContext, unknown>> | ComponentType<any>'.
[0]       Type 'typeof Home' is not assignable to type 'ComponentClass<RouteComponentProps<any, StaticContext, unknown>, any>'.
[0]         The types of 'contextType.Provider.propTypes.children' are incompatible between these types.
[0]           Type 'React.Validator<React.ReactNode>' is not assignable to type 'import("C:/Users/craig/Projects/razzle-line-numbers/node_modules/@types/react-router/node_modules/@types/react/index").Validator<import("C:/Users/craig/Projects/razzle-line-numbers/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode>'.
[0]             Type 'React.ReactNode' is not assignable to type 'import("C:/Users/craig/Projects/razzle-line-numbers/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'.
[0]               Type '{}' is not assignable to type 'ReactNode'.
[0]   Overload 2 of 2, '(props: RouteProps<string, { [x: string]: string; }> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string; }>>, context: any): Route<...>', gave the following error.
[0]     Type 'typeof Home' is not assignable to type 'ComponentType<RouteComponentProps<any, StaticContext, unknown>> | ComponentType<any>'.

Inspired by:
https://github.com/vercel/next.js/issues/35986
https://github.com/vercel/next.js/issues/36019

Fixes #1867
---
 examples/with-typescript-plugin/package.json | 4 ++++
 examples/with-typescript/package.json        | 8 ++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/examples/with-typescript-plugin/package.json b/examples/with-typescript-plugin/package.json
index fff853db8..cf80cc05e 100644
--- a/examples/with-typescript-plugin/package.json
+++ b/examples/with-typescript-plugin/package.json
@@ -43,6 +43,10 @@
     "webpack": "^4.44.1",
     "webpack-dev-server": "^3.11.2"
   },
+  "resolutions": {
+    "@types/react": "<18.0.0",
+    "@types/react-dom": "<18.0.0"
+  },
   "jest": {
     "transform": {
       "\\.(ts|tsx)$": "ts-jest",
diff --git a/examples/with-typescript/package.json b/examples/with-typescript/package.json
index 5599eff35..fae8e73f5 100644
--- a/examples/with-typescript/package.json
+++ b/examples/with-typescript/package.json
@@ -25,8 +25,8 @@
     "@types/express": "^4.17.6",
     "@types/jest": "^25.2.1",
     "@types/node": "^13.13.2",
-    "@types/react": "^16.9.34",
-    "@types/react-dom": "^16.9.6",
+    "@types/react": "^17",
+    "@types/react-dom": "^17",
     "@types/react-router-dom": "^5.1.4",
     "@types/webpack-env": "^1.15.2",
     "babel-preset-razzle": "4.2.15",
@@ -37,5 +37,9 @@
     "html-webpack-plugin": "^4.5.2",
     "webpack": "^4.44.1",
     "webpack-dev-server": "^3.11.2"
+  },
+  "resolutions": {
+    "@types/react": "<18.0.0",
+    "@types/react-dom": "<18.0.0"
   }
 }