'title' is undefined while generating sitemap in Astro

Question

I want to generate a dynamic sitemap but it is showing undefined value for the post.frontmatter.title, what shall I do to fix this?

Error:

Code for sitemap.xml.js,

import { Feed } from "feed"; import { getAllPosts } from "../lib/posts"; export async function get(){ const feed = new Feed({ title: "dhairyashah.vercel.app", description: "I am 16 years old and I share and write articles on Web Development, Programming, and Technology.", id: "https://dhairyashah.vercel.app/", link: "https://dhairyashah.vercel.app/sitemap.xml", language: "en", image: "https://dhairyashah.vercel.app/assets/profile-pic.png", favicon: "https://dhairyashah.vercel.app/assets/profile-pic.png", author: { name: "Dhairya Shah", email: "[email protected]", }, feedLinks: { rss: "https://dhairyashah.vercel.app/sitemap.xml", atom: "https://dhairyashah.vercel.app/sitemap.xml", }, }) const allPosts = (await getAllPosts()) allPosts.forEach((post) => { feed.addItem({ title: post.frontmatter.title, id: `https://dhairyashah.vercel.app/posts/${post.url}`, link: `https://dhairyashah.vercel.app/posts/${post.url}`, content: post.frontmatter.description, }); }) return { body: feed.rss2() } }

Code for ../lib/posts.js,

async function load() { const fetchedPosts = import.meta.glob('../pages/posts/*.mdx', { eager: true }); const getPost = async (key) => { const url = key.replace('../pages/posts/', '/').replace('.mdx', '/'); const awaitedPost = await fetchedPosts[key].default(); const item = { ...awaitedPost.props.frontmatter, url, key, } return item; }; const mappedPosts = Object.keys(fetchedPosts).map((key) => { const awaitedPost = getPost(key); return awaitedPost; }); const results = await Promise.all(mappedPosts); return results; } let _posts; export async function getAllPosts() { _posts = _posts || load(); return await _posts; }

What can be do so that I can generate the site map without getting undefined error?

Have you tried post.title instead? Since you're using the spread operator on prop.frontmatter you should be able to access title directly. — stevenw00
– stevenw00, Commented Aug 22, 2022 at 6:12

wassfila · Accepted Answer · 2023-01-21 14:42:49Z

Answer

I got this working

the main issue you had is the usage of the {eager: true} option in import.meta.glob which then no longer require an await because the content is 'eagerly' imported already.

Reference: https://vitejs.dev/guide/features.html#glob-import

then as pointed out by stevenw00 you also need to match the post spread to the usage frontmatter to be selected in one place, so it's enough with ...awaitedPost,

Fix

async function load() { const fetchedPosts = import.meta.glob('../pages/posts/*.mdx', { eager: true }); const getPost = async (key) => { const url = key.replace('../pages/posts/', '/').replace('.mdx', '/'); const awaitedPost = fetchedPosts[key]; const item = { ...awaitedPost, url, key, } return item; };

Example

Just for the sake of this question, I placed the fix in a minified example to provide a functional reference https://github.com/MicroWebStacks/astro-examples/blob/7d3d634a198390a88ce7bd4a46a9d47a226f8f55/22_mdx-svg/src/libs/posts.js#L9

Collectives™ on Stack Overflow

'title' is undefined while generating sitemap in Astro

1 Answer 1

Answer

Fix

Example

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Answer

Fix

Example

Comments

Related