-
Notifications
You must be signed in to change notification settings - Fork 370
Description
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:
- Give a clearer error message explicitly mentioning
Alert
and thevariant
prop? - 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
Type
Projects
Status