gray-matter parsea dates como Date objects: el bug que rompio el build

Contexto

El build del portfolio empezó a fallar con el error: Objects are not valid as a React child (found: [object Date]). El frontmatter YAML tenia date: 2026-01-15 y todo funcionaba en dev pero fallaba en build.

Lo que aprendi

gray-matter parsea automaticamente valores que parecen fechas en YAML y los convierte en objetos Date de JavaScript. Esto rompe React porque no puede renderizar Date objects directamente.

El problema

---
title: "Mi proyecto"
date: 2026-01-15
---

const { data } = matter(raw);
console.log(typeof data.date);  // "object" (es un Date!)
console.log(data.date);          // 2026-01-15T00:00:00.000Z

Si luego haces <p>{project.date}</p>, React explota.

La solucion: convertir a string

export function getAllProjects(): Project[] {
  return files.map((file) => {
    const { data, content } = matter(raw);
    return {
      title: data.title ?? slug,
      // Forzar date a string
      date: data.date instanceof Date
        ? data.date.toISOString().split("T")[0]
        : (data.date ?? ""),
      body: content,
    };
  });
}

Alternativa: quotes en el YAML

# Esto se parsea como string (nota las comillas)
date: "2026-01-15"
project: "portfolio-organico"

# Esto se parsea como Date object (sin comillas)
date: 2026-01-15

Poner comillas es la solucion mas simple, pero depende de que todos los archivos MDX lo hagan consistentemente. Mejor defenderse en el codigo.

Otros valores que gray-matter auto-convierte

Leccion

Siempre verificar los tipos que retorna gray-matter. El YAML spec es permisivo con los tipos y la libreria hace conversiones automaticas que pueden sorprenderte. TypeScript no te salva aqui porque data es Record<string, any>.

Referencia

• gray-matter
• YAML date specification