_the simplest way_ example not compiling in typescript

• react-error-boundary version: 2.2.2
• node version: 12.16.1
• yarn version: 1.22.4
• typescript version: 3.9.2

What you did

Trying to compile the simplest way example from Usage in docs with typescript. https://github.com/bvaughn/react-error-boundary#usage

(Since the onError example has type annotations and type definitions are shipped, I’m assuming typescript is supported for this project.)

What happened:

Compile error

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<ErrorBoundaryPropsWithFallback> | Readonly<ErrorBoundaryPropsWithComponent> | Readonly<...>): ErrorBoundary', gave the following error.
    Type '({ error, componentStack, resetErrorBoundary }: { error: any; componentStack: any; resetErrorBoundary: any; }) => Element' is not assignable to type 'ComponentType<FallbackProps>'.
      Type '({ error, componentStack, resetErrorBoundary }: { error: any; componentStack: any; resetErrorBoundary: any; }) => Element' is not assignable to type 'FunctionComponent<FallbackProps>'.
        Types of parameters '__0' and 'props' are incompatible.
          Type 'PropsWithChildren<FallbackProps>' is not assignable to type '{ error: any; componentStack: any; resetErrorBoundary: any; }'.
            Property 'error' is optional in type 'PropsWithChildren<FallbackProps>' but required in type '{ error: any; componentStack: any; resetErrorBoundary: any; }'.
  Overload 2 of 2, '(props: ErrorBoundaryProps, context?: any): ErrorBoundary', gave the following error.
    Type '({ error, componentStack, resetErrorBoundary }: { error: any; componentStack: any; resetErrorBoundary: any; }) => Element' is not assignable to type 'ComponentType<FallbackProps>'.
      Type '({ error, componentStack, resetErrorBoundary }: { error: any; componentStack: any; resetErrorBoundary: any; }) => Element' is not assignable to type 'FunctionComponent<FallbackProps>'.

Reproduction:

import React from 'react';
import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error, componentStack, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <pre>{componentStack}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

const ComponentThatMayError = () => <div />;

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

Suggested solution:

Update the docs with a working example.

[memark]

OK, then there is not much to do about this issue, since the example is already valid javascript.

I’ll just post the updated code example here for future reference.

import {ErrorBoundary, FallbackProps} from 'react-error-boundary'

function ErrorFallback({error, componentStack, resetErrorBoundary}: FallbackProps) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error?.message}</pre>
      <pre>{componentStack}</pre>
      <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>
)

[kentcdodds]

I don’t use TypeScript so I’m not sure how to proceed here. A pull request to fix either the typings or the example would be welcome 😃