FallbackComponent not working for imported function component

react-error-boundary version:
node version: v16.14.0
npm version: 8.3.1

Relevant code or config


// Error Fallback UI Alias
import { InfoCircleOutlined } from '@ant-design/icons';
import { Alert, Button, Col, Row } from 'antd';

const Message = (props: { reset?: () => void }) => {
  const { reset } = props;

  return (
    <div>
      <Row
        gutter={[16, 16]}
        justify="space-between"
        align="middle"
        className="ml-1"
      >
        <Col xs={24} md={reset ? 12 : 24}>
          <span>Oops... something broke here!</span>
        </Col>
        {reset && (
          <Col xs={24} md={12}>
            <Button
              size="small"
              type="primary"
              onClick={reset}
              style={{ color: 'black' }}
            >
              Back to safety!
            </Button>
          </Col>
        )}
      </Row>
    </div>
  );
};

function ErrorFallback({
  error,
  resetErrorBoundary,
}: {
  error?: any;
  resetErrorBoundary?: () => void;
}) {
  console.log('reset', resetErrorBoundary);
  return (
    <Alert
      showIcon
      type="error"
      description={error}
      className="mb-4 h-100 p-3"
      message={<Message reset={resetErrorBoundary} />}
      icon={<InfoCircleOutlined style={{ fontSize: '2.5rem' }} />}
    />
  );
}

export default ErrorFallback;

// Main App component

<ErrorBoundary
      FallbackComponent={ErrorFallback}
      resetKeys={[error]}
      onReset={() => setError(false)}
>
     {
         <TransactionCategory
             {...props}
             updateOtherParams={updateParams}
             otherParams={otherParams}
             column={error ? {} : transactionCategoryTableColumns.all}
         />
      }
</ErrorBoundary>

What you did: I duplicated the very same error fallback ui within the main app component file and it worked.

What happened: I want to have my fallback UI component in a separate file, but when I import it to be called by the FallbackComponent, it doesn't work.

Reproduction repository:

Problem description:

Suggested solution: Try make the FallbackComponent prop accept imported function components.

bvaughn / react-error-boundary

FallbackComponent not working for imported function component #118