Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

create razzle-app with-typescript error: src/App.tsx(9,34): error TS2769: No overload matches this call #1867

Open
cskeogh opened this issue May 26, 2022 · 0 comments · May be fixed by #1868
Open

create razzle-app with-typescript error: src/App.tsx(9,34): error TS2769: No overload matches this call #1867

cskeogh opened this issue May 26, 2022 · 0 comments · May be fixed by #1868

Comments

@cskeogh
Copy link

cskeogh commented May 26, 2022

🐛 Bug report

Current Behavior

Create a new razzle typescript project using yarn create razzle-app --example with-typescript new-project, Upon first run:

yarn run v1.22.19
$ concurrently "yarn start:tsc" "razzle start"
$ tsc -b -w --preserveWatchOutput
[0]
[0] 8:26:30 pm - Starting compilation in watch mode...
[0]
[1]  WAIT  Compiling...
[1]
[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>'.
[0]
[0] 8:26:31 pm - Found 1 error. Watching for file changes.

Expected behavior

No error

Reproducible example

$ yarn create razzle-app --example with-typescript new-project
$ cd new-project
$ NODE_OPTIONS=--openssl-legacy-provider yarn start

Your environment

Software Version(s)
Razzle 4.2.17
Razzle Plugins none
Node v17.9.0
Browser Chrome
npm/Yarn yarn v1.22.19
Operating System Windows 11
TypeScript 4.7.2
React 17.0.2
cskeogh added a commit to cskeogh/razzle-fixes that referenced this issue May 26, 2022
@cskeogh
Fix typescript examples error
c806f10 
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:
vercel/next.js#35986
vercel/next.js#36019

Fixes jaredpalmer#1867
@cskeogh cskeogh linked a pull request May 26, 2022 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix typescript examples error cskeogh/razzle-fixes
1 participant
@cskeogh