'ErrorBoundary' cannot be used as a JSX component

[Rafal Radomski]

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 (

Something went wrong:

{error.message}

Try again

)
}
const ui = (
<ErrorBoundary
FallbackComponent={ErrorFallback}
onReset={() => {
// reset the state of your app so the error doesn't happen again
}}

<ComponentThatMayError />

) `

[Kasper Nilsson]

Also getting this in my project, it appears to have something to do with the version of react I have in my project being different than what's expected.

Key code lines:

import { ReactNode } from 'react'
import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'

interface Props {
  children: ReactNode
}

const ErrorBoundary = ({ children }: Props) => {
// my custom wrapping code
  return (
    <ReactErrorBoundary FallbackComponent={ErrorFallback} onError={onError}>
      {children}
    </ReactErrorBoundary>
  )
}

Error:
'ReactErrorBoundary' 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("node_modules/@types/hoist-non-react-statics/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.

The particular node module it conflicts with changes each time I do a fresh yarn install, so it seems to be an issue with this lib as opposed to other deps.

[Colin Diesh]

probably related to changes in @types/react v18

[Colin Diesh]

I added

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

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

[Daniel Mantey]

Also facing this same issue

[Edouard]

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

[Andre Ribeiro]

Same issue

[fabioebt]

Same here

[Peigeng Jiang Andy]

Having the same issue as well

[Nick Kang]

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

[Hendry5479]

Need to upgrade the version of @types/react

[tomtang1122]

I also have the same issue.

[Carlos Nardo]

Same here

[Sam Frampton]

same here

[Brian Heise]

Same issue

[Leon Huang]

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:

• facebook/react#24304 (comment)
• facebook/react#24304 (comment)

[blockmood]

Same here

[floatrx]

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

[Philip Lucks]

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

[Gyumong]

Same here

[mayas salman]

Same here

[Brian Vaughn]

Assuming this is the solution, this issue should no longer be relevant with v4 since ErrorBoundary will wrap children within a <Context.Provider>. Let's re-open with a repro case if the issue still happens in v4.