Fix typescript examples error #1868

cskeogh · 2022-05-26T11:43:19Z

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'.
[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'.

Inspired by:
vercel/next.js#35986
vercel/next.js#36019

Fixes #1867

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

vercel · 2022-05-26T11:43:24Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
razzle	✅ Ready (Inspect)	Visit Preview	May 26, 2022 at 11:43AM (UTC)

silviubogan · 2022-09-28T16:42:38Z

I have discovered a new error.

❯ yarn start
yarn run v1.22.19
warning ../../package.json: No license field
$ concurrently "yarn start:tsc" "razzle start"
warning ../../package.json: No license field
$ tsc -b -w --preserveWatchOutput
[0] 
[0] 19:24:42 - Starting compilation in watch mode...
[0] 
[1]  WAIT  Compiling...
[1] 
[1] ℹ Compiling Client
[1] node:internal/crypto/hash:71
[1]   this[kHandle] = new _Hash(algorithm, xofLen);
[1]                   ^
[1] 
[1] Error: error:0308010C:digital envelope routines::unsupported
[1]     at new Hash (node:internal/crypto/hash:71:19)
[1]     at Object.createHash (node:crypto:133:10)
[1]     at module.exports (/home/silviub/pro/mireasa-si-banii/node_modules/webpack/lib/util/createHash.js:135:53)
[1]     at NormalModule._initBuildHash (/home/silviub/pro/mireasa-si-banii/node_modules/webpack/lib/NormalModule.js:417:16)
[1]     at handleParseError (/home/silviub/pro/mireasa-si-banii/node_modules/webpack/lib/NormalModule.js:471:10)
[1]     at /home/silviub/pro/mireasa-si-banii/node_modules/webpack/lib/NormalModule.js:503:5
[1]     at /home/silviub/pro/mireasa-si-banii/node_modules/webpack/lib/NormalModule.js:358:12
[1]     at /home/silviub/pro/mireasa-si-banii/node_modules/loader-runner/lib/LoaderRunner.js:373:3
[1]     at iterateNormalLoaders (/home/silviub/pro/mireasa-si-banii/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
[1]     at Array.<anonymous> (/home/silviub/pro/mireasa-si-banii/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
[1]     at Storage.finished (/home/silviub/pro/mireasa-si-banii/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
[1]     at /home/silviub/pro/mireasa-si-banii/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
[1]     at /home/silviub/pro/mireasa-si-banii/node_modules/graceful-fs/graceful-fs.js:123:16
[1]     at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
[1]   opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
[1]   library: 'digital envelope routines',
[1]   reason: 'unsupported',
[1]   code: 'ERR_OSSL_EVP_UNSUPPORTED'
[1] }
[1] 
[1] Node.js v18.9.0
[1] razzle start exited with code 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("/home/silviub/pro/mireasa-si-banii/node_modules/@types/react-router/node_modules/@types/react/index").Validator<import("/home/silviub/pro/mireasa-si-banii/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode>'.
[0]             Type 'React.ReactNode' is not assignable to type 'import("/home/silviub/pro/mireasa-si-banii/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] 19:24:43 - Found 1 error. Watching for file changes.

It's the one starting with Error: error:0308010C:digital envelope routines::unsupported. I thought this is a good place to post this.

Reproducible example

nvm install 18.9.0
nvm use 18.9.0
npx create-razzle-app@4.2.17 --example with-typescript my-test-project
cd my-test-project
yarn start

Software	Version(s)
Razzle	4.2.17
Razzle Plugins	with-typescript example
Node	v18.9.0
Browser	Chromium
npm/Yarn	yarn v1.22.19
Operating System	Manjaro Linux with latest updates
TypeScript	4.0.3
React	17.0.1

I see the old versions of TypeScript and React being used. I could take a look into upgrading these in the example after the bug presented above is solved.

silviubogan · 2022-09-29T16:43:19Z

@fivethreeo Hi! Just targeting your attention because I thought this was a good place to post the previous message in here but now I am doubting myself. Do you still work on Razzle? Should I open a new issue?

fivethreeo · 2022-09-29T17:21:28Z

Moving here https://github.com/elzzad/dazzle

fivethreeo · 2022-09-29T17:24:06Z

@dtabuenc is helping out once babel loader is in help wanted on more plugins and docs

silviubogan · 2022-09-30T13:44:51Z

@fivethreeo

Moving here https://github.com/elzzad/dazzle

I comprehend that I can post the message above in the Dazzle repo.

What is the history of Dazzle and its purpose? How stable it is? What breaking changes does it introduce? If it is the future, what would be an easy (starting) issue where I can help?

Thanks a lot and good luck 😃

fivethreeo · 2022-09-30T14:21:57Z

Same purpose as razzle, not ready yet so stability unknown. Porting plugins from the alpha branch of razzle. Porting plugins from master branch of razzle. Making parts of razzle default config into plugins. But first make babel work in dazzle.

silviubogan · 2022-09-30T15:41:27Z

Same purpose as razzle, not ready yet so stability unknown. Porting plugins from the alpha branch of razzle. Porting plugins from master branch of razzle. Making parts of razzle default config into plugins. But first make babel work in dazzle.

@fivethreeo I want to give a try to help making babel work in dazzle. Should I start looking into the razzle code or directly into dazzle code? And in what branch? Eventually, a starting file? Any more indications? Thanks.

fivethreeo · 2022-09-30T15:48:03Z

Start here https://github.com/elzzad/dazzle/blob/feature/razzle-migration/packages/dazzle-babel-loader/src/loader/get-config.ts

fivethreeo · 2022-09-30T16:01:16Z

@dtabuenc is working on babel over the weekend

fivethreeo · 2022-10-01T12:52:43Z

Join us on discord https://discord.gg/tK9ZgcwwKv

vercel bot deployed to Preview May 26, 2022 11:43 View deployment

github-actions bot added the examples label May 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix typescript examples error #1868

Fix typescript examples error #1868

cskeogh commented May 26, 2022

vercel bot commented May 26, 2022 •

edited

silviubogan commented Sep 28, 2022

silviubogan commented Sep 29, 2022

fivethreeo commented Sep 29, 2022

fivethreeo commented Sep 29, 2022

silviubogan commented Sep 30, 2022

fivethreeo commented Sep 30, 2022

silviubogan commented Sep 30, 2022

fivethreeo commented Sep 30, 2022

fivethreeo commented Sep 30, 2022

fivethreeo commented Oct 1, 2022

Fix typescript examples error #1868

Are you sure you want to change the base?

Fix typescript examples error #1868

Conversation

cskeogh commented May 26, 2022

vercel bot commented May 26, 2022 • edited

silviubogan commented Sep 28, 2022

Reproducible example

silviubogan commented Sep 29, 2022

fivethreeo commented Sep 29, 2022

fivethreeo commented Sep 29, 2022

silviubogan commented Sep 30, 2022

fivethreeo commented Sep 30, 2022

silviubogan commented Sep 30, 2022

fivethreeo commented Sep 30, 2022

fivethreeo commented Sep 30, 2022

fivethreeo commented Oct 1, 2022

vercel bot commented May 26, 2022 •

edited