'ErrorBoundary' cannot be used as a JSX component
rafalradomski opened this issue · comments
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.4node
version: 14.19.0npm
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 />
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.
probably related to changes in @types/react v18
I added
"resolutions": {
"@types/react": "^17.0.0"
}
to my package.json to pin to @types/react v17 for now
Also facing this same issue
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",
...
}
Same issue
Same here
Having the same issue as well
Upgrading to "@types/react": "18.0.9"
fixed it.
Need to upgrade the version of @types/react
I also have the same issue.
Same here
same here
Same issue
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:
Same here
👋 Very simple solution: this return this.props.children
replace with return <>{this.props.children}</>
upgraded my App's @types/react
which solved issue.
Same here
Same here
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.