Estoy tratando de ejecutar mi jsx dentro de un archivo javascript como este:

 import React from 'react' export class HeaderNav extends React.Component { constructor(props) { super(props) console.log('Created Component') } } console.log('Create New Component'); <HeaderNav />

Luego tengo un archivo mdx que importa el componente de reacción de esta manera:

 import '../mdx/header-nav'

Esto no crea el componente y solo Create New Component se envía a la consola, y espero que se impriman ambos console.logs .

Cuando importo el componente en mi archivo MDX y coloco el html, funciona bien:

 import React from 'react' export class HeaderNav extends React.Component { constructor(props) { super(props) console.log('Created Component') } }

Luego tengo un archivo mdx que importa el componente de reacción de esta manera:

 import { HeaderNav } from '../mdx' <HeaderNav />

Esto crea el componente y genera el Created Component en la consola.

¿Hay algo que deba hacer para usar el primer método de importar el archivo para no tener que colocar el elemento en todos mis archivos mdx?