I am trying to run my jsx within a javascript file like this:

import React from 'react'

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

console.log('Create New Component');
<HeaderNav />

I then have an mdx file that imports the react component like this:

import '../mdx/header-nav'

This doesn't create the component and only Create New Component is output to the console, and I would expect both console.logs to print.

When I import the component into my MDX file, and place the html then it works just fine:

import React from 'react'

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

I then have an mdx file that imports the react component like this:

import { HeaderNav } from '../mdx'

<HeaderNav />

This creates the component and outputs Created Component in the console.

Is there something that I need to do to use the first method of importing the file so I don't have to place the element in all of my mdx files?