#page.render is not a function

1 messages · Page 1 of 1 (latest)

forest creek
#

Este es mi código:

import { getEntry } from "astro:content";

const { lang, slug } = Astro.params;
const page = await getEntry("portfolio", ${lang}/${slug});

if (!page) {
return Astro.redirect("/404");
}

const { Content } = await page.render();

<h1>{page.data.title}</h1>

<Content />

El error que me sale:
page.render is not a function

Estoy usando adaptador de cloudfare, mode: "server",

Asi se ve mi content.config.ts

const portfolio = defineCollection({
loader: glob({ pattern: "*/.{md,mdx}", base: "./src/content/portfolio" }),
schema: ({ image }) =>
z.object({
title: z.string().max(60),
description: z.string(),
coverImage: image(),
technologies: z.string().array(),
ctaButton: z.string(),
repository: z.string(),
live: z.string(),
}),
});

export const collections = {
blog,
services,
portfolio,
};

digital obsidianBOT
#

Hi @forest creek. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

El error que estás experimentando, "page.render is not a function", se debe a un cambio en la API de Content Collections de Astro en la versión 5.0. En las versiones más recientes de Astro, la función render() ya no es un método de la entrada de la colección, sino una función separada que debes importar.

Para solucionar este problema, necesitas hacer los siguientes cambios en tu código:

  1. Importa la función render junto con getEntry desde 'astro:content'.
  2. Usa la función render() pasando la entrada de la colección como argumento.

Aquí tienes el código corregido:

---
import { getEntry, render } from "astro:content";

const { lang, slug } = Astro.params;
const page = await getEntry("portfolio", `${lang}/${slug}`);

if (!page) {
  return Astro.redirect("/404");
}

const { Content } = await render(page);
---

<h1>{page.data.title}</h1>

<Content />

Este cambio debería resolver el error que estás experimentando.

Es importante notar que estás usando el adaptador de Cloudflare con el modo "server", lo cual es correcto para el renderizado bajo demanda (SSR).

En cuanto a tu content.config.ts, parece que estás usando la nueva API de Content Collections introducida en Astro 5.0. Sin embargo, hay un pequeño error en la definición de tu colección portfolio. El patrón de glob debería ser "**/*.{md,mdx}" en lugar de "*/.{md,mdx}". Aquí tienes la corrección:

const portfolio = defineCollection({
  loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/portfolio" }),
  // ... resto del código
});

Este cambio asegurará que todos los archivos .md y .mdx en cualquier subdirectorio de src/content/portfolio sean incluidos en la colección.

Para más información sobre estos cambios, puedes consultar:

#

Estos recursos te proporcionarán más detalles sobre los cambios en la API de Content Collections y cómo usar la nueva función render().

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: