'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> ) `

Issue Analytics

State:
Created a year ago
Reactions:16
Comments:19

Top GitHub Comments

10reactions

edouardmissetcommented, May 3, 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",
    ...
}

6reactions

zlargoncommented, Jul 9, 2022

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:

Top Results From Across the Web

'ErrorBoundary' cannot be used as a JSX component error ...

I have a problem with react-error-boundary error when migrating from CRA to vite.js (2.9.12). react-error-boundary version: 3.1.4 node ...

Component cannot be used as a JSX component. Its return ...

I'm currently getting the following error on the Todos component inside TodoApp.tsx : 'Todos' cannot be used as a JSX component.

Error Boundaries - React

A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch() .

'errorboundary' cannot be used as a jsx component - You.com

'ReactErrorBoundary' cannot be used as a JSX component. Its instance type 'ErrorBoundary' is not a valid JSX element. The types returned by 'render()'...

Component cannot be used as a JSX component in React

The error Component cannot be used as a JSX component occurs for multiple reasons, returning an array of JSX elements instead of a...