`parseMarkdown` `Cannot read properties of undefined (reading 'map')`

[stijns96]

I’m trying to render code snippets dynamically with @nuxtjs/mdc, but I’m running into issues.

Minimal example

// /components/content/SnippetExample.vue
<script setup>
const { data: ast } = await useAsyncData('ast', async () => {
  const md = `
\`\`\`ts [app.config.ts]
export default defineAppConfig()
\`\`\`\
`;

  return parseMarkdown(md);
});
</script>

<template>
  {{ ast }}
</template>

This results in the following error:

 ERROR  [unhandledRejection] Cannot read properties of undefined (reading 'map')

    at compileToJSON (node_modules/.pnpm/@nuxtjs+mdc@0.17.4_magicast@0.3.5/node_modules/@nuxtjs/mdc/dist/runtime/parser/compiler.js:50:127)
    ...

What I’m trying to do

• I’m fetching code examples from my server (Vercel server assets).

• The goal is to render these snippets inside either:

  • a fenced code block, or
  • a Nuxt UI code tree.

What I’ve tried

• <MDC> component → works but doesn’t behave correctly in development.
• <MDCRenderer> → gives the error above.

Here’s an example where I’m trying to pass in extracted code:

<script setup>
import { withoutTrailingSlash } from 'ufo';

const route = useRoute();
const path = withoutTrailingSlash(route.path);
const snippet = path.split('/').pop();
const fetchUrl = `/api${path}/${snippet}.liquid`;

const { data, error } = await useAsyncData(snippet, () => $fetch(fetchUrl));

const example = computed(() => {
  const docs = getDocs(data.value);
  return docs?.match(
    /@example\s+([\s\S]*?)(?=\s*@|\s*{%-?\s*enddoc|\s*$)/
  )?.[1];
});
</script>

<template>
  <MDC v-if="example" :value="`\`\`\`liquid\n${example}\n\`\`\``" />
</template>

Question

Is this a bug in MDC/MDCRenderer, or am I passing the markdown/code incorrectly?
What’s the recommended way to render dynamic code snippets (fetched at runtime) using @nuxtjs/mdc?