fix(mdx): handle double curly braces serialization in MDX payload attributes

components/MDXContent.tsx

@@ -40,9 +40,19 @@ function HeroSection(props: any) {
 }
 
 async function Block(props: any) {
-  const { type, data, children } = props;
+  const { type, children } = props;
+  let { data } = props;
   const locale = await getLocale();
 
+  // If data was passed as a JSON string (via our lib/blog.ts fix), parse it back
+  if (typeof data === 'string') {
+    try {
+      data = JSON.parse(data);
+    } catch (e) {
+      console.error('Failed to parse MDX block data:', e);
+    }
+  }
+
   // Normalize type (Payload sometimes uses blockType in data)
   const blockType = type || data?.blockType;
 

lib/blog.ts

@@ -62,7 +62,13 @@ export async function getPostBySlug(slug: string, locale: string): Promise<PostD
     const fileContent = await fs.readFile(filePath, 'utf-8');
     const { data, content } = matter(fileContent);
 
-    let parsedContent = content;
+    // Fix MDX data props dropped by next-mdx-remote
+    // Payload serializes as data={{"items":...}} which Acorn treats as a Block statement.
+    const fixedContent = content.replace(/data=\{\{([\s\S]*?)\}\}/g, (match, p1) => {
+      return 'data="{' + p1.replace(/"/g, '&quot;') + '}"';
+    });
+
+    let parsedContent = fixedContent;
     try {
       if (content.trim().startsWith('{')) {
         parsedContent = JSON.parse(content);

package.json

@@ -113,7 +113,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.3.22-rc.21",
+  "version": "2.3.22-rc.22",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",