How to use the @mdx-js/mdx.createMdxAstCompiler function in @mdx-js/mdx

/** @jsx jsx */

import React, { useEffect, useRef, useState } from 'react'; // eslint-disable-line no-unused-vars
import { Helmet } from 'react-helmet';
import { Link, graphql } from 'gatsby';
import MDXRenderer from 'gatsby-mdx/mdx-renderer';
import throttle from 'lodash.throttle';
import { MDXProvider } from '@mdx-js/tag';
import { jsx } from '@emotion/core';
import { SkipNavContent } from '@reach/skip-nav';
import { borderRadius, colors, gridSize } from '@arch-ui/theme';

import matter from 'gray-matter';
import visit from 'unist-util-visit';
import rawMDX from '@mdx-js/mdx';
const compiler = rawMDX.createMdxAstCompiler({ mdPlugins: [] });

import Layout from '../templates/layout';
import mdComponents from '../components/markdown';
import { SiteMeta } from '../components/SiteMeta';
import { media, mediaMax } from '../utils/media';
import { Container, Footer, Sidebar, Search } from '../components';
import { CONTAINER_GUTTERS } from '../components/Container';

const SIDEBAR_WIDTH = 280;

function titleCase(str, at = '-') {
  if (!str) return str;

  const arr = str
    .toLowerCase()
    .split(at)

const path = require('path');
const get = require('lodash.get');
const slugify = require('@sindresorhus/slugify');
const visit = require('unist-util-visit');
const rawMDX = require('@mdx-js/mdx');
const matter = require('gray-matter');
const mdastToString = require('mdast-util-to-string');

const generateUrl = require('./generateUrl');

const compiler = rawMDX.createMdxAstCompiler({ remarkPlugins: [] });

const PROJECT_ROOT = path.resolve('..');

// Used for sorting the navigation:
const GROUPS = [
  '',
  'quick-start',
  'guides',
  'tutorials',
  'discussions',
  'api',
  'list-plugins',
  'road-map',
];
const SUB_GROUPS = [
  '',

* const cacheHast = () => ast => {
   *   results.hast = ast;
   *   return ast;
   * }; */

  // pull classic style frontmatter off the raw MDX body
  debug("processing classic frontmatter");
  const { data, content: frontMatterCodeResult } = grayMatter(node.rawBody);
  const content = `${frontMatterCodeResult}

export const _frontmatter = ${JSON.stringify(data)}`;

  // get mdast by itself
  // in the future it'd be nice to not do this twice
  debug("generating AST");
  const compiler = mdx.createMdxAstCompiler(options);
  results.mdast = compiler.parse(content);

  /* await mutateNode({
   *   pluginOptions,
   *   mdxNode,
   *   files: getNodes().filter(n => n.internal.type === `File`),
   *   getNode,
   *   reporter,
   *   cache
   * }); */

  const gatsbyRemarkPluginsAsremarkPlugins = await getSourcePluginsAsRemarkPlugins(
    {
      gatsbyRemarkPlugins: options.gatsbyRemarkPlugins,
      mdxNode: node,
      //          files,