Having trouble rendering mdx template – front matter issue?

[benfrain]

Operating system

Tahoe 26.3

Eleventy

3.1.2

Describe the bug

Never used mdx before, don't use 11ty much – so entirely possible this is an 'error between keyboard and chair'!

However, I'm following the docs for adding mdx to my project. When I try and run an Q12026.mdx file with the just the following content inside:

---
layout: layout
---

export function Exclaim(props) {
    return <>{props.target}!!!</>;
}

# Hello from <Exclaim target={props.key} />

I get the following error:

Problem writing Eleventy templates:
[11ty] 1. Having trouble rendering mdx template ./updates/Q12026.mdx (via TemplateContentRenderError)
[11ty] 2. Having trouble compiling template ./updates/Q12026.mdx (via TemplateContentCompileError)
[11ty] 3. Could not parse import/exports with acorn (via 3:14)
[11ty] 4. Unexpected token (via SyntaxError)
[11ty] 
[11ty] Original error stack trace: SyntaxError: Unexpected token
[11ty]     at pp$4.raise (file:///Users/benfrain/Sites/polaris/node_modules/micromark-extension-mdxjs/node_modules/acorn/dist/acorn.mjs:3731:13)
[11ty]     at pp$9.unexpected (file:///Users/benfrain/Sites/polaris/node_modules/micromark-extension-mdxjs/node_modules/acorn/dist/acorn.mjs:770:8)
[11ty]     at Parser.jsx_parseElementAt (/Users/benfrain/Sites/polaris/node_modules/acorn-jsx/index.js:356:18)
[11ty]     at Parser.jsx_parseElement (/Users/benfrain/Sites/polaris/node_modules/acorn-jsx/index.js:389:19)
[11ty]     at Parser.parseExprAtom (/Users/benfrain/Sites/polaris/node_modules/acorn-jsx/index.js:396:21)
[11ty]     at pp$5.parseExprSubscripts (file:///Users/benfrain/Sites/polaris/node_modules/micromark-extension-mdxjs/node_modules/acorn/dist/acorn.mjs:2849:19)
[11ty]     at pp$5.parseMaybeUnary (file:///Users/benfrain/Sites/polaris/node_modules/micromark-extension-mdxjs/node_modules/acorn/dist/acorn.mjs:2807:17)
[11ty]     at pp$5.parseExprOps (file:///Users/benfrain/Sites/polaris/node_modules/micromark-extension-mdxjs/node_modules/acorn/dist/acorn.mjs:2735:19)
[11ty]     at pp$5.parseMaybeConditional (file:///Users/benfrain/Sites/polaris/node_modules/micromark-extension-mdxjs/node_modules/acorn/dist/acorn.mjs:2718:19)
[11ty]     at pp$5.parseMaybeAssign (file:///Users/benfrain/Sites/polaris/node_modules/micromark-extension-mdxjs/node_modules/acorn/dist/acorn.mjs:2685:19)

Here is my eleventy.config.js:

import { pathToFileURL } from "node:url";
import { evaluate } from "@mdx-js/mdx";
import { renderToStaticMarkup } from "react-dom/server";
import * as runtime from "react/jsx-runtime";

export default async function (eleventyConfig) {
    eleventyConfig.addExtension("mdx", {
        compile: async (str, inputPath) => {
            const { default: mdxContent } = await evaluate(str, {
                ...runtime,
                baseUrl: pathToFileURL(inputPath),
            });

            return async function (data) {
                let res = await mdxContent(data);
                return renderToStaticMarkup(res);
            };
        },
    });
    eleventyConfig.addTemplateFormats("mdx");
    if (process.env.ELEVENTY_RUN_MODE !== "serve") {
        const { HtmlBasePlugin } = await import("@11ty/eleventy");

        eleventyConfig.addPlugin(HtmlBasePlugin, {
            // The base URL: defaults to Path Prefix
            baseHref: "https://ourserver.com/polaris/",

            // Comma separated list of output file extensions to apply
            // our transform to. Use `false` to opt-out of the transform.
            extensions: "html",
        });
    }

    eleventyConfig.addCollection("updates", function (collectionApi) {
        return collectionApi.getFilteredByGlob("updates/*.mdx");
    });

    return {
        htmlTemplateEngine: "njk",
        // Applied the prefix here, rather than in the async function to ensure the url writer thingy knows about it upfront
        pathPrefix:
            process.env.ELEVENTY_RUN_MODE === "serve" ? "/" : "/polaris/",
    };
}

Any idea if this is an actual error or just something I am doing wrong? It seems to dislike the frontmatter but as I understand it, that should be OK to have in the *.mdx file?

Reproduction Source Code URL

minimal test repo

Screenshots

No response

[benfrain]

Added a repo you can pull and try npx @11ty/eleventy --serve

https://github.com/benfrain/11ty-mdx