Skip to content

Bug - Alert - crashes with unclear message when variant prop is not one of expected strings #8015

@cben

Description

@cben

Describe the problem
I wrote variant="error" instead of variant="danger" by mistake. The resulting crash (up to nearest react error boundary) had a very unclear message.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of AlertIcon.

That part about "exports/import" was a red herring but it's what all googling about "expected a string" errors led me to.
The hint about AlertIcon would have saved me a lot of time, except it only shows up in a debug build of React; the project I'm now on is sadly set up with prod builds of React which only gave me this URL:
https://reactjs.org/docs/error-decoder.html/?invariant=130&args[]=undefined&args[]=
showing only the first sentence :-(

How do you reproduce the problem?
https://codesandbox.io/s/strange-darkness-5hwm9f

Expected behavior
One of:

  1. Give a clearer error message explicitly mentioning Alert and the variant prop?
  2. Ignore the unknown variant, fall back to variant="default" rendering?
  • ☝️ I'm happy to send a PR, but tell me which behavior is preferred — error of ignore?

Is this issue blocking you?
Not now, but it took me several hours to narrow down the problem (partly because I was on a prod build of React

Screenshots
If applicable, add screenshots to help explain the issue.

What is your environment?

  • OS: Linux (Fedora 36)
  • Browser chrome
  • Version 105.0.5195.102 (Official Build) (64-bit)

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions