Confusing error "useStyles: `styles` is undefined" from a simple mistake

Description

If you wrap a ListItem in anything other than OrderedList/UnorderedList, you get a confusing useStyles ContextError

Link to Reproduction

https://codesandbox.io/s/gracious-breeze-lwfur

Steps to reproduce

Shove a ListItem inside another element with an as=“ol”/as=“ul” and you get this error.

I’m sure there’s some logical reason why ListItem components must be children of OrderedList/UnorderedList components and it doesn’t work with a simple as on some other generic component like Box or Flex. But the error you get seems completely unrelated:

useStyles: `styles` is undefined. Seems you forgot to wrap the components in `<StylesProvider />` 

It makes you think “how does the rest of the app work then if StylesProvider isn’t set” so it’s certainly confusing and I’ve hit this twice recently (just enough time between both occurances for me to forget what the cause was!)

Chakra UI Version

1.7.0

Browser

Seems to be irrelevant to browsers, occurs in all

Operating System

• macOS
• Windows
• Linux

Additional Information

Just a QoL thing, a better error that points to the actual cause and solution would be great, especially for newcomers to Chakra!

[jcleefw]

I seem to get the similar issue with Table … hmm wonder if the same trick will fix the issue

[LulaV14]

@quangnmwork Seems like the error message is intended to say there was a parent tag missing. In my case I was getting this error message when trying to add a <TagLabel> without adding the proper parent tag <Tag>

So this works for me:

<Tag>
  <TagLabel>Example</TagLabel>
</Tag>