Is it possible to compile and bundle an MDX string on the client side?

[guilherme-marin]

👋 Hello there!

Noob question over here...

I'm trying to create something similar to this (contextual editor from Tina`s CMS) with NextJS and bundler-mdx:

What I've done so far is related to building the MDX string on the client side (I understand the risks), going through the AST and inserting new nodes, changing the frontmatter and referencing imports when a new custom component is embedded. This works so far, the result is an MDX string inside a state, but I am not able to compile and bundle this MDX string again, I'm tryng to render a preview of the changes on client side. I'm looking for some guidance on this as I don't know if I'm on the right track.

Is there a reasonable way to do this on client side, preferably without having to access the server side every time a change is made? How?

[ChristianMurphy]

Welcome @guilherme-marin! 👋

Is it possible to compile and bundle an MDX string on the client side?

Yes, but multiple tools are needed.
MDX will compile MDX text to JS text, then you could run WebPack, Rollup, or another bundler in browser to bundle that code up.

Though, it appears your end goal is a preview of how the content is rendered?

I'm trying to create something similar to this (contextual editor from Tina`s CMS)

For that, you may not need to bundle.
mdx.evaluate() or mdx.evaluateSync() could be used https://mdxjs.com/packages/mdx/#evaluatefile-options
It will pass back a React component you can add to the page, and as an alternative to bundling you can pass custom elements/components into the components prop on the generated MDX component.

[LukasBombach]

Here's an example of a working implementation using TypeScript, React ^18 and @mdx-js/mdx ^3

"use client";

import { useState, useEffect } from "react";
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { evaluate } from "@mdx-js/mdx";

import type { FC, ReactNode } from "react";
import type { MDXProps } from "mdx/types";
import type { EvaluateOptions } from "@mdx-js/mdx";

type ReactMDXContent = (props: MDXProps) => ReactNode;
type Runtime = Pick<EvaluateOptions, "jsx" | "jsxs" | "Fragment">;

const runtime = { jsx, jsxs, Fragment } as Runtime;

export const Preview: FC<{ source?: string }> = ({ source = "" }) => {
  const [MdxContent, setMdxContent] = useState<ReactMDXContent>(() => () => null);

  useEffect(() => {
    evaluate(source, runtime).then(r => setMdxContent(() => r.default));
  }, [source]);

  return <MdxContent />;
};

[CooperHash]

but if source string contain like import xxx from '@/component/xxx' it will

hook.js:608 Error: Expected component `xxx` to be defined: you likely forgot to import, pass, or provide it

how to deal with this

[ChristianMurphy]

@CooperHash see https://github.com/orgs/mdx-js/discussions/2495

[CooperHash]

thanks