MDXLoader, A Custom Remark Directive & returning a React Component

[AndrewSepic]

I'm building out a code labs style functionality into one of our docusaurus sites, with the goal of having a single MDX file broken up into multiple steps, which can then be piped into a component for further processing & layout.

I've created a simple remark plugin that defines new remark direction called step

import { visit } from 'unist-util-visit';

const plugin = () => {
  const transformer = async (ast, vfile) => {
    // Check and only parse MDX files within '/tutorials'
    if (vfile.path.includes('/tutorials')) {
      visit(ast, (node) => {
        if (node.type === 'containerDirective') {
          if (node.name !== 'step') {
            return;
          }
          node.data = {
            hName: 'StepComponent',
            hProperties: {
              className: 'codelabs-step'
            }
          };
          node.children = node.children || [];
        }
      });
    }
  };
  return transformer;
};
export default plugin;

Example usage..

:::step
Other content & children go here
:::

And this has been loaded via the remarkPlugins of the plugin-docs-config.

This is working when my plugin just wraps a some HTML elements around the markdown, by when I try to return a JSX/React component and pass that component via the MDXComponents & MDXProvider..

...
import Mermaid from '@theme/Mermaid';
import StepComponent from './StepComponent.js';

const MDXComponents = {
  Head,
  details: MDXDetails,
  Details: MDXDetails,
  [...]
  mermaid: Mermaid,
  table: MDXTable,
  step: StepComponent // my component here
};

export default MDXComponents;

This component is not defined. I don't believe this is an issue with how this component is passed to MDXCOmponents (as all those imports look good), but I believe I need to pass this to the Docusaurus MDX Loader, but am not sure if this available for me to use.

Any guidance on how I can make my new remark directive return a custom component would be great. Or if you see a problem with my approach, all input is welcome.

Thanks 🙏