'ErrorBoundary' cannot be used as a JSX component about react-error-boundary HOT 21 CLOSED

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/[email protected] in your dependencies.

You can upgrade react v18, or update @types/[email protected] version in your lock file.

Checkout the solution from these comments:

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

from react-error-boundary.

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

from react-error-boundary.

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

from react-error-boundary.

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

from react-error-boundary.

I added

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

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

from react-error-boundary.

Need to upgrade the version of @types/react

from react-error-boundary.

Same issue

from react-error-boundary.

Having the same issue as well

from react-error-boundary.

Same here

from react-error-boundary.

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

from react-error-boundary.

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.

from react-error-boundary.

probably related to changes in @types/react v18

from react-error-boundary.

Also facing this same issue

from react-error-boundary.

I also have the same issue.

from react-error-boundary.

Same here

from react-error-boundary.

same here

from react-error-boundary.

Same issue

from react-error-boundary.

Same here

from react-error-boundary.

Same here

from react-error-boundary.

Same here

from react-error-boundary.

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.

from react-error-boundary.