Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

'ErrorBoundary' cannot be used as a JSX component

See original GitHub issue

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...