How to allow fallback prop in React error boundary with Typescript?

Question

I have an error boundary on top of my app. It works, and I can pass it a custom component as a fallback. However, Typescript claims that:

Property 'fallback' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>' (errorboundary.js)

and that

No overload matches this call. (index.tsx)

import { Component } from "react";

export class ErrorBoundary extends Component {
  state = { error: null };

  static getDerivedStateFromError(error) {
    return { error };
  }

  render() {
    if (this.state.error) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}

How to fix this?

Please note I'm not using the react-error-boundary library. The native error boundary class should do the work.

EDIT: complete working code:

interface Props {
  fallback: React.ReactNode;
}

export class ErrorBoundary extends Component<Props> {
  state = { error: null };

  static defaultProps: Props = {
    fallback: [],
  };

  static getDerivedStateFromError(error) {
    return { error };
  }

  render() {
    if (this.state.error) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}

richardaum · Accepted Answer · 2021-02-21 18:24:52Z

3

You should extend Component passing the type definition of your props, like this:

interface ErrorBoundaryProps {
  fallback: JSX.Element; // if fallback is a JSX.Element
}

interface ErrorBoundaryState {
  error: boolean | null;
}

export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> { ... }

answered Feb 21, 2021 at 18:24

richardaum

6,77713 gold badges52 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HelloWorldEngineer Over a year ago

Yes, and also declare the static defaultProps in the class. I've edited the question with the full working code.

Collectives™ on Stack Overflow

How to allow fallback prop in React error boundary with Typescript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related