Using Paste v18 with React 17

[brandongregoryscott]

Hi team - I'm trying to upgrade to Paste 18 in the Segment application, which is still on React 17. I see in PR #2965 that the unit tests are run against React 16, 17 and 18, but I'm wondering if anyone has real-world experience upgrading to Paste 18 while being on an older version of React.

Specifically, I'm getting TypeScript errors for Box, Text and other primitives that the compiler thinks nonce, onResize and onResizeCapture are required HTMLAttributes properties:

client/foundations/stepper/Stepper.tsx:58:6 - error TS2739: Type '{ children: Element[]; display: "flex"; flexDirection: "row"; "data-testid": string \| undefined; columnGap: "space90"; }' is missing the following properties from type 'Pick<BoxProps, "id" \| "transform" \| "children" \| "label" \| "slot" \| "style" \| "title" \| "disabled" \| "type" \| "target" \| "color" \| "role" \| "position" \| "width" \| "alignContent" \| ... 426 more ... \| "__webkit_calendar_picker_indicator_hover">': nonce, onResize, onResizeCapture
--
  |  
  | 58     <Box display="flex" flexDirection="row" data-testid={dataTestId} columnGap="space90">

Are there any other consumers trying to use the latest Paste version on an older version of React with any success?

[SiTaggart]

Hi @brandongregoryscott

I was hoping the types would be backwards compatible, but apparently not. You might get success with just resolving the @types/react to the same React version you're running. We bundle @types/react v18, so setting a resolution and making sure you only use v17 might make these go away

[brandongregoryscott]

Unfortunately we were already using a yarn resolution for our @types/react dependency 😦

"resolutions": {
  "@types/react": "17.0.39"
}

I was hoping to be able to merge declarations and mark those properties as optional (in a partial react module definition, or a partial @twilio-paste/box module definition), but it seems to wipe out the typing for the rest of the package with something like this:

declare module 'react' {
  export interface HTMLAttributes<T> {
    nonce?: string
    onResize?: (event: unknown) => void
    onResizeCapture?: (event: unknown) => void
  }
}

[SiTaggart]

Before I go too far down the rabbit hole, how far off it is a React 18 upgrade? There are a lot of Codemods available to help with it as it is a breaking change.

The reason I ask is that, you're going to have to do it eventually...

[brandongregoryscott]

We have an item on our backlog for it but we hadn't planned for it this quarter.

[SiTaggart]

Version 19 of @twilio-paste/core just went out and it looks like that solves backwards compatibility of types for React 17.

[FirstWhack]

For posterity.. It also requires Typescript 4.5+ (a breaking change that seems to have snuck through) because it starts making prolific use of the type modifier on individual import names. Of course the answer is ultimately you need to upgrade, but the fumble of these peerDeps between 18/19 is even more cumbersome than it seems. In an ideal world the backwards compatibility would have been fixed and released as a Patch on version 18 but the package may not have been structured in a way this is possible.

[TheSisb]

Oof. That's a big miss on our part. Sorry about that, and thanks for letting us know about it!