Getting Typescript errors when upgrading to React 18

[gxxcastillo]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/react

SDK Version

6.19.6

Framework Version

6.19.6

Link to Sentry event

No response

Steps to Reproduce

Hi, I've started getting the following Typescript errors in my build. It seems it has to do with ErrorBoundaryProps not having a children property declared. Adding children: React.ReactNode to ErrorBoundaryProps fixed the issue for me.

DefinitelyTyped/DefinitelyTyped#46691

Expected Result

Typescript errors should not occur when React.ErrorBoundary has children

Actual Result

No overload matches this call.
  Overload 1 of 2, '(props: ErrorBoundaryProps | Readonly<ErrorBoundaryProps>): ErrorBoundary', gave the following error.
    Type '{ children: Element; fallback: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ErrorBoundary> & Readonly<ErrorBoundaryProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ErrorBoundary> & Readonly<ErrorBoundaryProps>'.
  Overload 2 of 2, '(props: ErrorBoundaryProps, context: any): ErrorBoundary', gave the following error.
    Type '{ children: Element; fallback: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ErrorBoundary> & Readonly<ErrorBoundaryProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ErrorBoundary> & Readonly<ErrorBoundaryProps>'

[AbhiPrasad]

Hey thanks for reporting. We’re currently busy working on the new major version, #4882 but we’ll get to this afterwards!

[gxxcastillo]

Thanks @AbhiPrasad.

In case anyone else runs into this, the quickest fix for now is probably to ignore the error (I had trouble with module augmentation, I think because ErrorBoundaryProps is not exported?). It should allow your build to proceed but you'll want to comeback and remove it once this issue is resolved:

{/* @ts-expect-error - Temporary Fix */}

[cameronaziz]

I have opened #4966 to fix this issue

[lforst]

We are resolving this with our next patch (version 6.19.7) so keep an eye out for updates and remember to remove your @ts-expect-errors. Let us know here if you run into any more issues.

Thanks @cameronaziz for the initiative!

Update: The patch is out https://github.com/getsentry/sentry-javascript/releases/tag/6.19.7