react-error-boundary: 'ErrorBoundary' cannot be used as a JSX component

Hi guys, I get a strange typescript error when I use the default first example from your lib:

‘ErrorBoundary’ cannot be used as a JSX component, any chance you had seen that before?

react-error-boundary version: 3.1.4
node version: 14.19.0
npm version: 6.14.16

` import {ErrorBoundary} from ‘react-error-boundary’ function ErrorFallback({error, resetErrorBoundary}) { return ( <div role="alert">

Something went wrong:

{error.message}

<button onClick={resetErrorBoundary}>Try again</button> </div> ) } const ui = ( <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => { // reset the state of your app so the error doesn’t happen again }}

<ComponentThatMayError />

</ErrorBoundary> ) `

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 17
Comments: 21 (1 by maintainers)

Most upvoted comments

This issue is caused by the breaking change from @types/react v18.

Use command npm ls @types/react to see if you have any @types/react@18.x in your dependencies.

You can upgrade react v18, or update @types/react@17.x version in your lock file.

Checkout the solution from these comments:

+13

zlargon on Jul 9, 2022

👋 Very simple solution: this return this.props.children replace with return <>{this.props.children}</>

+12

floatrx on Sep 29, 2022

I also have the same issue.

'ErrorBoundary' cannot be used as a JSX component.
  Its instance type 'ErrorBoundary' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/home/ext_em/code/innova-web-ui-proto/node_modules/@types/react-redux/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

package.json

  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-error-boundary": "^3.1.4",
    ...
}

+10

edouardmisset on May 3, 2022

Upgrading to "@types/react": "18.0.9" fixed it.

nick-kang on May 13, 2022

Need to upgrade the version of @types/react

Hendry5479 on May 13, 2022

I added

  "resolutions": {
    "@types/react": "^17.0.0"
  }

to my package.json to pin to @types/react v17 for now

cmdcolin on Apr 18, 2022

Having the same issue as well

AndyJPG on May 11, 2022

Same issue

andreribeiro27 on May 10, 2022

upgraded my App’s @types/react which solved issue.

lucksp on Oct 13, 2022

Same here

fabioebt on May 10, 2022