New version of @types/react causing type errors with a new yarn.lock

[ericfrank-stripe]

Hey remote-ui team 👋. This issue is going to look very similar to #151, but it's brand new as of last night.

TL;DR: Type checking is broken in this repository with a fresh yarn.lock file because of a new version of @types/react.

Steps to reproduce:

1. Check out a clean copy of the main branch
2. Delete yarn.lock
3. Run yarn install
4. Run yarn type-check

tsc reports many errors of this type:

'RemoteImage' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<ReactPropsFromRemoteComponentType<RemoteComponentType<"Image", { src: string; }, true>>, any, any> | null' is not a valid JSX element.

Yesterday (April 7) version 18.0.0 of @react/types was published to NPM. The @types/react-reconciler package (for all versions) requests "@types/react": "*", so as soon as the new version came out it started pulling it in for new installs. Here's what the dependency tree looks like:

% npm list @types/react
@remote-ui/react@4.5.0 /Users/ericfrank/stripe/remote-ui/packages/react
├── @types/react@17.0.44 
├─┬ @types/react-dom@17.0.15
│ └── @types/react@17.0.44  deduped
└─┬ @types/react-reconciler@0.26.4
  └── @types/react@18.0.0

You can see that react-reconciler has it's own version of @types/react pinned to version 18. remote-ui does not support React 18 yet, so the mismatch in types causes the errors. I'm not familiar with how those type libraries get generated on DefinitelyTyped and I don't have a great solution to this at the moment. We're advising our developers to add a resolutions property to their package.json files as a workaround:

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

I'm continuing my research, but let me know if you have an idea how we can solve this one. Thanks!

[ericfrank-stripe]

Looks like this is the issue: facebook/react#24304

[kumar303]

I ran into this the other day, too

[kumar303]

This is a good explainer of what's going on facebook/react#24304 (comment)

[ericfrank-stripe]

Closing—we're going with the resolutions fix for our users.

[lemonmade]

Yeah, sorry we can't offer anything better, I think resolutions are the best any kind of project generator can do if they want to output a React 17-supporting TypeScript project :(

[ericfrank-stripe]

@lemonmade No worries, I don't think this issue is fixable from within @remote-ui which is why I closed it.