Rendering components with a number in the name fail silently

[brunolemos]

Bug Report

Describe the bug

If you import like this: import { H1 } from './H1' and try to render <H1>Title</H1>, it won't render anything and won't show any error.

If you remove the number like this import { H1 as HH } from './HH' and try to render <HH>Title</HH>, it renders correctly.

Maybe it's a bug in mdx itself?

To Reproduce

---
name: Typography
---

import { H1 } from './H1'

# H1

<H1>Title example</H1>

export const H1 = props => (
  <Text
    {...props}
  />
)

In order to allow us to quickly reproduce you issue please include a link to a reproduction repository.

Expected behavior

Render component normally or at least show an error message about the limitation

Environment

• OS: macOS 10.14
• Node/npm version: Node 8/npm 5

Additional context/Screenshots

[pedronauck]

For sure @brunolemos, I tried to debug to see if something related to docz, but I think that this is a bug related to the mdx parser 😕

[mzedeler]

It probably is, but can we at least find out if the mdx parser project has registered it and then reference it here?

[rupification]

took a while for me to figure it out as well as it is weird.
this is my work around for now.. if you need to use it in the MD then use as and rename it. For actual example usage just use <Playground/> no issues.

import { Playground, Props } from 'docz'
import { H1 } from './index'
import { H1 as HeadingOne } from './index'
import Text from '../text'

# Heading

Hello there
<HeadingOne>This is H1 heading</HeadingOne>

## Basic usage
<Playground>
<H1>This is H1 heading</H1>
</Playground>