Hard to debug collection render() error

[jesper-bylund]

Astro Info

Astro                    v4.5.16
Node                     v18.18.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap

If this issue only occurs in one browser, which browser is a problem?

Safari

Describe the Bug

I'm rendering a collection of beer reviews, but the post content cannot be rendered.

Using a classic setup for rendering:

---
import { type CollectionEntry, getCollection } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';

export async function getStaticPaths() {
    const posts = await getCollection('blog');
    return posts.map((post) => ({
        params: { slug: post.slug },
        props: post,
    }));;
}
type Props = CollectionEntry<'blog'>;

const post = Astro.props;
const { Content } = await post.render();
---

<BlogPost {...post.data}>
    <Content />
</BlogPost>

Results in the following error, which is hard for me to parse. The file is there. The content in the file is not causing the issue (removed it without change). Cannot trace the "module 'post'" reference.

Render error: Error: Cannot find module 'post' imported from '/Users/jesperbylund/Projects/stoutempire/src/content/blog/2024-04-01-tripel-de-garre.md'
    at nodeImport (file:///Users/jesperbylund/Projects/stoutempire/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55102:25)
    at ssrImport (file:///Users/jesperbylund/Projects/stoutempire/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55011:30)
    at eval (/Users/jesperbylund/Projects/stoutempire/src/content/blog/2024-04-01-tripel-de-garre.md:5:37)
    at async instantiateModule (file:///Users/jesperbylund/Projects/stoutempire/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55071:9) {
  code: 'ERR_MODULE_NOT_FOUND',
  plugin: 'astro:content-asset-propagation',
  id: '/Users/jesperbylund/Projects/stoutempire/src/content/blog/2024-04-01-tripel-de-garre.md?astroPropagatedAssets',
  pluginCode: '---\n' +
    'layout: post\n' +
    'title:  Tripel De Garre\n' +
    'brewer: Brouwerij Van Steenberge\n' +
    'venue: Delirium Café Lisboa\n' +
    'reviewer: Agnes Haverling\n' +
    'image: https://images.untp.beer/crop?width=200&height=200&stripmeta=true&url=https://untappd.s3.amazonaws.com/photos/2024_04_01/ba970a1adbf63033614bddfa8ab33c0b_c_1368642132_raw.jpg\n' +
    'pubDate: 2024-04-01\n' +
    '---\n' +
    '\n' +
    'Best belgian ever?? I think so ⭐️⭐️⭐️⭐️⭐️\n' +
    'High ABV creating an amazing fullness, loads of banana bread 🍌🍞🥃, and almost a little bit of peach (?) but not too fruity. You must try it if you have the chance 🙌\n' +
    '\n' +
    '![Photo](https://images.untp.beer/crop?width=200&height=200&stripmeta=true&url=https://untappd.s3.amazonaws.com/photos/2024_04_01/ba970a1adbf63033614bddfa8ab33c0b_c_1368642132_raw.jpg)\n' +
    '\t\t\t\t\t\t\n' +
    '[Toast this review on Untappd](https://untappd.com/user/-Spacebacon-/checkin/1368642132)\n'
}

What's the expected result?

Should render.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-dlftag

Participation

• [ ] I am willing to submit a pull request for this issue.

[lilnasy]

The reproduction project does not include a package.json. Does it need to be updated?

[github-actions[bot]]

Hello @jesper-bylund. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[jesper-bylund]

I don't know how that's even possible. I had serious problems setting up the StackBlitz project. For some reason it would not allow me to switch repo branches. 🤔 Looking into it...

[rishi-raj-jain]

https://github.com/jesper-bylund/stoutempire/tree/astro would be your minimal reproduction, by default stackblitz goes to the default branch.

[rishi-raj-jain]

can you remove the node_modules from the astro branch so that it is not huge branch to clone?

[jesper-bylund]

Updated with a new repo that is clearer: https://stackblitz.com/edit/withastro-astro-dlftag?file=README.md

[rishi-raj-jain]

Hey @jesper-bylund,

In your reproduction, the post is not found per the error message.

Update the [...slug].astro with const {post} = Astro.props and it'd work instead.

[rishi-raj-jain]

So two things that has fixed it:

1. Update the [...slug].astro with the following code:

---
import { type CollectionEntry, getCollection } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';

export async function getStaticPaths() {
    const posts = await getCollection('blog');
    return posts.map((post) => ({
        params: { slug: post.slug },
        props: {post},
    }))
}
type Props = CollectionEntry<'blog'>;

const {post} = Astro.props;
const {Content} = await post.render()
---

<BlogPost {...post.data}>
    <Content />
</BlogPost>

2. Update the markdown in content with the following change:

---
- layout: post
title:  Tripel De Garre
brewer: Brouwerij Van Steenberge
venue: Delirium Café Lisboa
reviewer: Agnes Haverling
pubDate: 2024-04-01
---

Best belgian ever?? I think so ⭐️⭐️⭐️⭐️⭐️
High ABV creating an amazing fullness, loads of banana bread 🍌🍞🥃, and almost a little bit of peach (?) but not too fruity. You must try it if you have the chance 🙌

# rest of your content

This is necessary as the layout -> post is not found in your application.

and this works!

[jesper-bylund]

Thank you very much! It was indeed the layout front matter. The only improvement I can think of is if the error states "layout post is missing". But I'm not sure how feasible that is.