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

const extractMdxMeta = (content) => {
  let meta = {};
  mdx.sync(content, {
    remarkPlugins: [
      () => (tree) => {
        visit(tree, 'export', (node) => {
          const ast = parse(node.value, {
            plugins: ['jsx'],
            sourceType: 'module'
          });
          traverse(ast, {
            VariableDeclarator: (path) => {
              if (path.node.id.name === 'meta') {
                // eslint-disable-next-line no-eval
                meta = eval(`module.exports = ${generate(path.node.init).code}`);
              }
            }
          });
        });

function mdxLoader(src) {
  const { math } = getOptions(this);
  const cb = this.async();
  const remarkPlugins = math
    ? [emoji, require('remark-math'), require('remark-html-katex') /* avoid warnings */, mdxPlugin]
    : [emoji, mdxPlugin];
  const result = mdx.sync(src, {
    remarkPlugins
  });

  cb(null, result);
}

)
  }
  let documentPath = path.join(filename, '..', documentFilename);
  let imports = `import React from 'react'\nimport { MDXTag } from '@mdx-js/tag'\n`

  // In development mode, we want to import the original document so that
  // changes will be picked up and cause a re-build.
  // Note: this relies on files with macros *not* being cached by babel.
  if (process.env.NODE_ENV === "development") {
    imports += `import '${documentPath}'\n`
  }

  let source = fs.readFileSync(documentPath, 'utf8');
  let transformedSource =
    babel.transformSync(
      imports+mdx.sync(source),
      {
        presets: [babelPresetReactApp],
        filename: documentPath,
      },
    ).code

  return writeTempFile(documentPath, transformedSource)
}

function inlineMDX({
  babel,
  referencePath,
  state,
}) {
  let { file: { opts: { filename } } } = state
  let program = state.file.path

  let rawCode = referencePath.parent.quasi.quasis[0].value.raw
  let transformedSource = mdx.sync(rawCode).replace('export default', '')

  // Need to parse the transformed source this way instead of
  // with babel.parse or babel.transform, as otherwise the
  // generated code has errors. I'm not sure why.
  let ast = parse(
    transformedSource,
    {
      plugins: ['jsx', 'objectRestSpread'],
      sourceType: "module",
      sourceFilename: filename,
    },
  )

  function visitImport(path) {
    let name = path.node.local.name
    var binding = path.scope.getBinding(name)

getJSXStringFromMDX(content) {
    return mdx.sync(content).toString();
  }

const getOutputs = src => {
  let jsx = ''
  let mdast = {}
  let hast = {}

  try {
    jsx = mdx.sync(src, {
      skipExport: true,
      remarkPlugins: [
        () => ast => {
          mdast = ast
          return ast
        }
      ],
      rehypePlugins: [
        () => ast => {
          hast = ast
          return ast
        }
      ]
    })
  } catch (error) {
    return {error}

const transformCode = src => {
  let transpiledMDX = ''

  try {
    transpiledMDX = mdx.sync(src, {
      skipExport: true,
      remarkPlugins: [removeImports, removeExports]
    })
  } catch (e) {
    return ''
  }

  return `
    ${transpiledMDX}

    render(
      
        
      
    )
  `

const transform = (code, filename) => {
  let jsxWithMDXTags = mdxTransform(code);

  let jsx = `
    import { MDXTag } from "@mdx-js/tag"

    ${jsxWithMDXTags}
  `;

  let result = babelTransform(jsx, { ...babelConfig, filename });
  return result.code;
};