Cannot process without Compiler

[codercatdev]

I am new to unified and trying to parse some markdown to mdx. Is this the correct way of doing it?

import React, { Children, useEffect, useState } from 'react';
import MDX from '@mdx-js/runtime';

import unified from 'unified';
import parse from 'remark-parse';
import mdx from 'remark-mdx';

import matter from 'gray-matter';

/* MDX Components */
// import {
//   Image,
//   Video,
//   Transformation,
//   CloudinaryContext,
// } from 'cloudinary-react';

const components = {};

class ErrorBoundary extends React.Component<
  any,
  { hasError: boolean; error: ReferenceError }
> {
  constructor(props: any) {
    super(props);
    this.state = { hasError: false, error: new ReferenceError() };
  }

  static getDerivedStateFromError(error: any) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error };
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <div className="grid grid-cols-1">
          <p>You have an error in your markdown.</p>
          <p className="text-red-800">{this.state.error.message}</p>
          <p className="text-xs text-gray-600">{this.state.error.stack}</p>
        </div>
      );
    }

    return this.props.children;
  }
}

export default function ShowMDX({ markdown }: { markdown: string }) {
  const [processed, setProcessed] = useState('');
  const [frontMatter, setFrontMatter] = useState({});
  useEffect(() => {
    if (markdown === '') {
      return;
    }
    const { content, data } = matter(markdown);
    setFrontMatter(data);
    unified()
      .use(parse)
      .use(mdx)
      .process(content)
      .then((file) => console.log(file));
  }, [markdown]);

  return (
    <div className="App">
      <ErrorBoundary>
        <MDX components={components} scope={frontMatter}>
          {processed}
        </MDX>
      </ErrorBoundary>
    </div>
  );
}

I keep getting "Cannot process without Compiler"

[ChristianMurphy]

unified.process() will try to take text, turn it into an AST, and back into text.

| ........................ process ........................... |
| .......... parse ... | ... run ... | ... stringify ..........|

          +--------+                     +----------+
Input ->- | Parser | ->- Syntax Tree ->- | Compiler | ->- Output
          +--------+          |          +----------+
                              X
                              |
                       +--------------+
                       | Transformers |
                       +--------------+

https://github.com/unifiedjs/unified#description

In your example you are parsing markdown, but don't have a compiler to take it back to text.

You have some options here.

1. You could call unified.parse() instead of unified.process() to just get the AST.
2. you could add the stringifier step, same as mdx does https://github.com/mdx-js/mdx/blob/e905f9c9b660073035c148a67cfe9962493dd0d4/packages/mdx/index.js#L13-L27
3. since it looks like React at runtime is your end goal, https://mdxjs.com/advanced/runtime may be what you are looking for.

[majiang]

If I need parse and transform (not stringify) do I need to call parse and run? Is there convenient function to do both at once?

[ChristianMurphy]

see #113 (comment) it explains the four methods available.
You're welcome to write your own utility/helper method to run both parse and run at the same time.

[majiang]

So the direct answer is yes I do and no in official?

[ChristianMurphy]

Right