Fix types for @types/react@18 #1798

karlhorky · 2022-04-24T17:35:44Z

Ref: #1062 (comment)
Ref: https://github.com/eps1lon/types-react-codemod#implicit-children
Ref: DefinitelyTyped/DefinitelyTyped#46691

Found some time to take a look at the breakages with @types/react@18, and opened a PR to fix the types in the @react-pdf/renderer package: #1798

However, this does not fix the other packages in the monorepo. And this may cause breakage for @types/react versions lower than 18.

cc @diegomura @jeetiss

Copying my comment here for visibility:

Hm, but it fails with @types/react v18, which was just published (because of the breaking changes):

Run yarn tsc
yarn run v1.22.18
$ /home/runner/work/project/node_modules/.bin/tsc
Error: project/generatePdf.tsx(212,6): error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: DocumentProps | Readonly<DocumentProps>): Document', gave the following error.
    Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Document> & Readonly<DocumentProps>'.
  Overload 2 of 2, '(props: DocumentProps, context: any): Document', gave the following error.
    Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Document> & Readonly<DocumentProps>'.
Error: project/generatePdf.tsx(213,8): error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: PageProps | Readonly<PageProps>): Page', gave the following error.
    Type '{ children: Element; size: "A4"; style: { fontFamily: string; fontSize: number; lineHeight: number; paddingTop: number; paddingBottom: number; paddingHorizontal: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Page> & Readonly<PageProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Page> & Readonly<PageProps>'.
  Overload 2 of 2, '(props: PageProps, context: any): Page', gave the following error.
    Type '{ children: Element; size: "A4"; style: { fontFamily: string; fontSize: number; lineHeight: number; paddingTop: number; paddingBottom: number; paddingHorizontal: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Page> & Readonly<PageProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Page> & Readonly<PageProps>'.
Error: packages/learn.upleveled.io-server/routes/studentAssessments/learningOutcomesPdf.tsx(259,12): error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: SVGProps | Readonly<SVGProps>): Svg', gave the following error.
    Type '{ children: Element[]; style: { marginTop: number; marginBottom: number; }; width: string; height: string; viewBox: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Svg> & Readonly<SVGProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Svg> & Readonly<SVGProps>'.
  Overload 2 of 2, '(props: SVGProps, context: any): Svg', gave the following error.
    Type '{ children: Element[]; style: { marginTop: number; marginBottom: number; }; width: string; height: string; viewBox: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Svg> & Readonly<SVGProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Svg> & Readonly<SVGProps>'.
Error: project/generatePdf.tsx(266,16): error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: LinearGradientProps | Readonly<LinearGradientProps>): LinearGradient', gave the following error.
    Type '{ children: Element[]; id: string; x1: string; x2: string; y1: string; y2: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<LinearGradient> & Readonly<LinearGradientProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<LinearGradient> & Readonly<LinearGradientProps>'.
  Overload 2 of 2, '(props: LinearGradientProps, context: any): LinearGradient', gave the following error.
    Type '{ children: Element[]; id: string; x1: string; x2: string; y1: string; y2: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<LinearGradient> & Readonly<LinearGradientProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<LinearGradient> & Readonly<LinearGradientProps>'.
Error: project/generatePdf.tsx(285,8): error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: PageProps | Readonly<PageProps>): Page', gave the following error.
    Type '{ children: Element; size: "A4"; style: { fontFamily: string; fontSize: number; lineHeight: number; paddingTop: number; paddingBottom: number; paddingHorizontal: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Page> & Readonly<PageProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Page> & Readonly<PageProps>'.
  Overload 2 of 2, '(props: PageProps, context: any): Page', gave the following error.
    Type '{ children: Element; size: "A4"; style: { fontFamily: string; fontSize: number; lineHeight: number; paddingTop: number; paddingBottom: number; paddingHorizontal: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Page> & Readonly<PageProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Page> & Readonly<PageProps>'.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Process completed with exit code 2.

Ref: #1062 (comment) Ref: https://github.com/eps1lon/types-react-codemod#implicit-children Ref: DefinitelyTyped/DefinitelyTyped#46691

eizgg · 2022-05-03T18:39:27Z

Hi guys, any update?

guillaume-acard

I tested with the changes and works fine 👍

leeroyrose · 2022-08-04T16:34:39Z

Hey any updates on when this will get released?

karlhorky · 2022-08-05T12:33:03Z

@leeroyrose You'll have to ask @diegomura and @jeetiss, I don't have commit / publishing access.

ghost · 2022-08-19T06:17:19Z

Any update on getting this merged?

karlhorky · 2022-09-02T08:53:48Z

@diegomura @jeetiss I saw that you released a new version @react-pdf/renderer 3.0.0. I guess the major version bump would have unfortunately been a good time to get this change in, in case it is a breaking change for anyone.

But would you do this in a minor instead?

antoineharel · 2022-09-23T14:06:22Z

Hey @diegomura , this seems good, any plan to merge it ?

BarrieLAJ · 2022-09-27T13:29:29Z

Please could you release this update because we are trying to use the SVG component but without the children props in the types we cannot build the project.

antoineharel · 2022-09-27T13:58:58Z

I ended up creating custom components until an official update is released.
PropsWithChildren does the job here:

import ReactPDF from '@react-pdf/renderer';
import { FC, PropsWithChildren } from 'react';

export const Svg: FC<PropsWithChildren<ReactPDF.SVGProps>> = ({ ...props }) => (
  <ReactPDF.Svg {...props} />
);
export const G: FC<PropsWithChildren<ReactPDF.GProps>> = ({ ...props }) => (
  <ReactPDF.G {...props} />
);
export const ClipPath: FC<PropsWithChildren<ReactPDF.ClipPathProps>> = ({
  ...props
}) => <ReactPDF.ClipPath {...props} />;

BarrieLAJ · 2022-09-27T14:56:07Z

I ended up creating custom components while an official update is released. PropsWithChildren does the job here:

import ReactPDF from '@react-pdf/renderer';
import { FC, PropsWithChildren } from 'react';

export const Svg: FC<PropsWithChildren<ReactPDF.SVGProps>> = ({ ...props }) => (
  <ReactPDF.Svg {...props} />
);
export const G: FC<PropsWithChildren<ReactPDF.GProps>> = ({ ...props }) => (
  <ReactPDF.G {...props} />
);
export const ClipPath: FC<PropsWithChildren<ReactPDF.ClipPathProps>> = ({
  ...props
}) => <ReactPDF.ClipPath {...props} />;

Thanks very much this has worked for me.

yangricardo · 2022-09-30T22:34:56Z

I ended up creating custom components while an official update is released. PropsWithChildren does the job here:

import ReactPDF from '@react-pdf/renderer';
import { FC, PropsWithChildren } from 'react';

export const Svg: FC<PropsWithChildren<ReactPDF.SVGProps>> = ({ ...props }) => (
  <ReactPDF.Svg {...props} />
);
export const G: FC<PropsWithChildren<ReactPDF.GProps>> = ({ ...props }) => (
  <ReactPDF.G {...props} />
);
export const ClipPath: FC<PropsWithChildren<ReactPDF.ClipPathProps>> = ({
  ...props
}) => <ReactPDF.ClipPath {...props} />;

That really solved, thanks!!

vieirai · 2022-10-17T17:07:38Z

Any movement on this?
The patch above, is nice and works, but would be nice to have it working properly without having to redefine the Components.

Jonur · 2022-10-17T17:15:28Z

Hi all, have we got any news on when this will be merged?

diegomura · 2022-11-07T02:55:49Z

Hi all. Sorry for the lack of response in here. Been very busy and also on vacations 😄 Code looks good, but this would break support for versions prior 18 as far as I can tell. I'm open to suggestions, but I would like to prevent that as much as possible.

ghost · 2022-11-07T04:05:25Z

This is really issue with all of my projects and using ts-ignore in someplace to overcome these. Most of project are using recent version of react. Better to support the latest with new react-pdf versions

diegomura · 2022-11-07T05:09:37Z

@chathu-novade isn't that a bit subjective? Not all projects can afford upgrading react so easily. So bumping react-pdf to 18 without being backwards compatible will break it to many. Merging this will just mean switching the sub-group of users to which this lib will be broken

ghost · 2022-11-07T05:42:59Z

I mean we can release with a major version with react 18 support. Like many other react related projects does. I'm open to other suggestions. There are lot of issues created asking for 18 support.

ghost · 2022-11-07T05:45:15Z

For this PR I think react types needs to be updated to use this. Which also currently we have done since we had issues with old types with react-pdf/renderer with Typescript.

karlhorky · 2022-11-07T09:02:44Z

I mean we can release with a major version with react 18 support

Yeah I would also suggest this. Often it's not reasonable to support all old versions of dependencies in a backwards-compatible way.

I've seen other major open source libraries also take this approach of only supporting React 18+ in the new versions.

diegomura · 2022-11-07T15:19:02Z

Thanks for the feedback! @karlhorky can you share what those libs are? I'm curious how they handled that. This project is in the most part very React agnostic (except for the reconciler and types) so dropping support just to have those merged seems a bit overkill. I wonder if there's a way to (via a postinstall script maybe) toggle deps based on the targeted react version

karlhorky · 2022-11-07T15:29:40Z

Can't remember the other ones off the top of my head, but considering how large of a release v18 is, I would imagine there will be more than just one.

Another way of going about it (if backwards compatibility is very important to you) is that you could maintain two versions - @react-pdf/[email protected] for pre-v18 versions, @react-pdf/renderer@>=4.0.0 for v18+.

Maintaining conditional types / scripts seems difficult to deal with / buggy to me, but that would also be an option.

diegomura · 2022-11-07T17:00:57Z

Thanks @karlhorky ! Both cases I think are still maintaining old versions, at least until a certain window. Backwards compatibility is important, as I know for certain some projects and companies using this lib won't have react migration to easy to do. Maintaining 2 parallel versions is a good approach, but this project does not have the dev power gatsby or next has, that why I was curious how I can prevent that.

I'll research about prepare or postinstall scripts. Another alternative would be extracting everything that's React version specific (which is not much) to an internal package, and require users to install a specific version of it depending what react version they are targeting. We can default to latest React version always. This is technically branching versions, but in a smaller codebase

karlhorky · 2022-11-07T17:21:05Z

Another alternative would be extracting everything that's React version specific (which is not much) to an internal package, and require users to install a specific version of it depending what react version they are targeting. We can default to latest React version always. This is technically branching versions, but in a smaller codebase

Oh interesting, that may be nicer / less moving parts than postinstall scripts or similar 👍 I've had some bad times with trying to get postinstall scripts to work reliably...

karlhorky · 2023-01-28T13:31:32Z

Thanks for the merge! I'll give it a try in @react-pdf/[email protected].

dimitur2204 · 2023-01-28T14:03:55Z

Solved a lot of problems!

jeetiss · 2023-01-28T14:05:57Z

@dimitur2204 thanks, i hope so

@karlhorky, try @react-pdf/[email protected] because 3.1.0 is broken 🥲

karlhorky · 2023-01-28T14:51:22Z

Tried out @react-pdf/[email protected] - it seems to be working, thanks!

Fix types for React v18

dbe076c

Ref: #1062 (comment) Ref: https://github.com/eps1lon/types-react-codemod#implicit-children Ref: DefinitelyTyped/DefinitelyTyped#46691

karlhorky mentioned this pull request Apr 24, 2022

Support React 17 #1062

Closed

JMHero05 approved these changes Apr 25, 2022

View reviewed changes

ejmudrak approved these changes May 3, 2022

View reviewed changes

guillaume-acard approved these changes Jul 11, 2022

View reviewed changes

RingoDev mentioned this pull request Aug 18, 2022

fix: add children prop to G and Svg components #1975

Closed

gitname mentioned this pull request Dec 16, 2022

React v18 unsupported #2078

Closed

Merge branch 'master' into pr/1798

c847feb

add changeset

4547994

This was referenced Jan 28, 2023

Add children Props to SvgProps. this fix #1873 #2082

Closed

Update G and Svg Props to include children #2087

Closed

Update index.d.ts #2143

Closed

jeetiss merged commit 17a8006 into diegomura:master Jan 28, 2023

github-actions bot mentioned this pull request Jan 28, 2023

chore: release packages #2157

Merged

karlhorky deleted the patch-1 branch January 28, 2023 14:51

rdennis mentioned this pull request Jan 31, 2023

Removed conflicting or redundant children props #2172

Merged

papack mentioned this pull request Jan 31, 2023

Presentation attributes in Svg tag show TS error #1873

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix types for @types/react@18 #1798

Fix types for @types/react@18 #1798

karlhorky commented Apr 24, 2022 •

edited

Loading

eizgg commented May 3, 2022

guillaume-acard left a comment

leeroyrose commented Aug 4, 2022

karlhorky commented Aug 5, 2022

ghost commented Aug 19, 2022

karlhorky commented Sep 2, 2022

antoineharel commented Sep 23, 2022

BarrieLAJ commented Sep 27, 2022

antoineharel commented Sep 27, 2022 •

edited

Loading

BarrieLAJ commented Sep 27, 2022

yangricardo commented Sep 30, 2022

vieirai commented Oct 17, 2022 •

edited

Loading

Jonur commented Oct 17, 2022

diegomura commented Nov 7, 2022

ghost commented Nov 7, 2022

diegomura commented Nov 7, 2022

ghost commented Nov 7, 2022

ghost commented Nov 7, 2022

karlhorky commented Nov 7, 2022 •

edited

Loading

diegomura commented Nov 7, 2022

karlhorky commented Nov 7, 2022 •

edited

Loading

diegomura commented Nov 7, 2022

karlhorky commented Nov 7, 2022 •

edited

Loading

karlhorky commented Jan 28, 2023 •

edited

Loading

dimitur2204 commented Jan 28, 2023

jeetiss commented Jan 28, 2023

karlhorky commented Jan 28, 2023

Fix types for @types/react@18 #1798

Fix types for @types/react@18 #1798

Conversation

karlhorky commented Apr 24, 2022 • edited Loading

eizgg commented May 3, 2022

guillaume-acard left a comment

Choose a reason for hiding this comment

leeroyrose commented Aug 4, 2022

karlhorky commented Aug 5, 2022

ghost commented Aug 19, 2022

karlhorky commented Sep 2, 2022

antoineharel commented Sep 23, 2022

BarrieLAJ commented Sep 27, 2022

antoineharel commented Sep 27, 2022 • edited Loading

BarrieLAJ commented Sep 27, 2022

yangricardo commented Sep 30, 2022

vieirai commented Oct 17, 2022 • edited Loading

Jonur commented Oct 17, 2022

diegomura commented Nov 7, 2022

ghost commented Nov 7, 2022

diegomura commented Nov 7, 2022

ghost commented Nov 7, 2022

ghost commented Nov 7, 2022

karlhorky commented Nov 7, 2022 • edited Loading

diegomura commented Nov 7, 2022

karlhorky commented Nov 7, 2022 • edited Loading

diegomura commented Nov 7, 2022

karlhorky commented Nov 7, 2022 • edited Loading

karlhorky commented Jan 28, 2023 • edited Loading

dimitur2204 commented Jan 28, 2023

jeetiss commented Jan 28, 2023

karlhorky commented Jan 28, 2023

karlhorky commented Apr 24, 2022 •

edited

Loading

antoineharel commented Sep 27, 2022 •

edited

Loading

vieirai commented Oct 17, 2022 •

edited

Loading

karlhorky commented Nov 7, 2022 •

edited

Loading

karlhorky commented Nov 7, 2022 •

edited

Loading

karlhorky commented Nov 7, 2022 •

edited

Loading

karlhorky commented Jan 28, 2023 •

edited

Loading