Generate pages from existing tags

[kind dagger]

I have followed the tutorial up to the point of Generating pages from existing tags. There's a final code sample that I have copied into my tutorial project that I'm following along.

---
import BaseLayout from "../../layouts/BaseLayout.astro";
import BlogPost from "../../components/BlogPost.astro";

export async function getStaticPaths() {
  const allPosts = await Astro.glob("../posts/*.md");

  const uniqueTags = [
    ...new Set(allPosts.map((post) => post.frontmatter.tags).flat()),
  ];

  return uniqueTags.map((tag) => {
    const filteredPosts = allPosts.filter((post) =>
      post.frontmatter.tags.includes(tag)
    );
    return {
      params: { tag },
      props: { posts: filteredPosts },
    };
  });
}

const { tag } = Astro.params;
const { posts } = Astro.props;
---

<BaseLayout pageTitle={tag}>
  <p>Posts tagged with {tag}</p>
  <ul>
    {
      posts.map((post) => (
        <BlogPost url={post.url} title={post.frontmatter.title} />
      ))
    }
  </ul>
</BaseLayout>

But I get the following error:
Cannot read properties of undefined (reading 'map')

I have made sure that every blog post includes at least one tag

[clever stag]

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

---

The error message "Cannot read properties of undefined (reading 'map')" typically indicates that the object you're trying to call .map() on is undefined. In your case, it seems like posts might be undefined.

The code you've provided is trying to map over posts to generate a list of BlogPost components. If posts is undefined, this operation will fail with the error message you're seeing.

The posts are being defined in the getStaticPaths function, where you're filtering allPosts to only include those that contain the current tag. If this filtering operation doesn't return any posts, posts could end up being undefined.

To debug this issue, you could add some logging to your getStaticPaths function to see what's being returned. For example:

export async function getStaticPaths() {
  const allPosts = await Astro.glob("../posts/*.md");

  const uniqueTags = [
    ...new Set(allPosts.map((post) => post.frontmatter.tags).flat()),
  ];

  return uniqueTags.map((tag) => {
    const filteredPosts = allPosts.filter((post) =>
      post.frontmatter.tags.includes(tag)
    );
    console.log(`Filtered posts for tag ${tag}:`, filteredPosts);
    return {
      params: { tag },
      props: { posts: filteredPosts },
    };
  });
}

This will log the filtered posts for each tag to the console, which might help you figure out why posts is undefined.

If you're still having trouble, please provide more information about your setup, such as the structure and content of your .md files and the exact steps you're following in the tutorial.

For more information, you can refer to the Astro documentation (https://docs.astro.build/en/tutorial/5-astro-api/2#final-code-sample).

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

@kind dagger kapa.ai is still learning and improving, please let us know how it did by reacting below

[lean shoal]

its been a while since I used the non-content collections api, but I don't se anything obvious, do you have the md file to hand?

all I can imagine is allPosts being undefined

[kind dagger]

I sure do 🙂 Here you go: https://github.com/jkriesp/my-astro-blog/tree/main/src/pages

I tried the AIs suggestion about logging, but I can't seem to log doing it like that. I tried it before too. Not in the terminal or the browser dev tools console

[kind dagger]

Shuldn't this log to console? ```export async function getStaticPaths() {
const allPosts = await Astro.glob("../posts/*.md");
console.log("allPosts:", allPosts);

Because nothing shows up here on page refresh... Very strange

[lean shoal]

it would appear in your node console

I don't use ssr etc so I've never seen this before but apparently getStaticPaths is ignored during dev time according to the console

can't imagine why or how thats helpful

but add export const prerender = true; to the top of the astro file

@kind dagger

did you mean to use <@&1055234544183287879>/cloudflare and setup ssr btw?

[kind dagger]

Yeah, I’m trying to have it hosted on Cloudflare pages. Maybe it’s interfering?

[kind dagger]

Will check that out as soon as I’m back to the computer. Thanks a lot for help so far

[lean shoal]

you dont need ssr or the cloudflare adapter to use cloudflare pages, unless you need server side stuff

[kind dagger]

Oh, just followed their docs. Guess I didn’t read it thoroughly enough before proceeding

[lean shoal]

all you need is this, and no cloudflare adapter

[kind dagger]

It worked! Thank you 😄 What exactly does this do? And based on your comments I feel that the tutorial might be outdated based on how and what one would do now to host a blog? In any case, I guess it's good to get familiar with the concepts Astro uses, and in that case the tutorial has been good so far

[lean shoal]

Yes I have some similar thoughts....

So the way you seem to have set it up now is that it requires a server to build your pages, on very single request, which is not ideal when I assume 99% or 100% of your blog is static content with maybe javascript, and no server side logic. That line there tells astro that this single page is actually statically built.

The tutorial also doesn't cover the content collections API either which I have in the past raised a concern about, as it walks someone though the many steps of building a blog using direct astro glob imports, only for the docs to then be like "btw the content collections api is awesome and lets you do lots more stuff" so it seems frustrating from my point of view.

I think you'd be better off maybe starting over with this: https://stackblitz.com/github/withastro/astro/tree/latest/examples/blog?file=README.md and when I say starting over, its nothing radical, you can copy paste your markdown files and layout astro component etc.

Content collections has many features such as a schema and Typescript type safety to ensure you dont accidentally miss frontmatter fields in your markdown, which is great.

@kind dagger

in a new branch or directory run npm create astro@latest -- --template blog and you'll get whats there in stackblitz

[kind dagger]

That’s awesome, thank you very much for pointing me in what I assume is the “modern” way of doing it.

And whenever you’re saying that my page is rebuilt in every request, is that due to that cloudflare dependency? Because if most definitely do not want it to be rebuilt on every request

[lean shoal]

Yeah, I am very puzzled generally why the tutorial doesnt lead people to the "pit of success" as its called, eg, telling them the better way of doing things first....

So its partly that and partly in your astro config your server mode will be set too, you can just deploy that blog in the link fully static with no cloudflare web server running, just normal cf pages

let me know how it goes

[kind dagger]

Finally had the time to look into this again@lean shoal . Got the Astro project setup with the template as you suggested. And I got it on CloudFlare Pages without any other setup. Thanks again for your help! The community is lucky to have you