Cannot wrap FallbackComponent with styled components

[schabluk]

• react-error-boundary version: 2.3.0
• node version: 12.16.1
• npm version: 6.13.4

Relevant code or config

const ErrorFallbackTop: React.FC<ErrorFallbackProps> = ({
  error: { message },
  className,
}): JSX.Element => {
  return (
    <div className={className}>
      <div>{message}</div>
    </div>
  );
};

export default styled(ErrorFallbackTop)`
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
`;

What you did: wrapped FallbackComponent in styled-components styled() method.

What happened:

react-error-boundary.umd.js?e895:109 Uncaught (in promise) Error: react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop
    at ErrorBoundary.render (react-error-boundary.umd.js?e895:109)
    at finishClassComponent (react-dom.development.js?61bb:17160)
    at updateClassComponent (react-dom.development.js?61bb:17110)
    at beginWork (react-dom.development.js?61bb:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
    at invokeGuardedCallback (react-dom.development.js?61bb:292)
    at beginWork$1 (react-dom.development.js?61bb:23203)
    at performUnitOfWork (react-dom.development.js?61bb:22154)
    at workLoopSync (react-dom.development.js?61bb:22130)

[kentcdodds]

Thanks for this. Could you make a reproduction in a codesandbox?

[marcosvega91]

I have created this example https://codesandbox.io/s/quiet-fast-g7747?file=/src/App.js

What do you think if we use import {isValidElementType} from 'react-is' instead of check if the FallbackComponent is a function?

[kentcdodds]

That sounds good to me! Thanks @marcosvega91.

[kentcdodds]

🎉 This issue has been resolved in version 2.3.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀