Cannot read properties of undefined (reading 'data') | Astro Lounge | Page 1

waxen wigeon May 24, 2023, 7:16 PM

#

I have a part of code (const pages = (await getCollection('posts')).filter(entry => entry.slug.startsWith(lang));) which just works fine at my posts.astro file, but the same thing does not work at posts/page/[slug].astro. It also seems that in the [slug].astro file getCollection not working at all. Why is that?

Content folder:
Structure:
slug.astro:

📎 slug.astro

vale hawk May 24, 2023, 7:17 PM

#

For the record, we have a getEntry() utility for this to fetch by slug!

import { getEntry } from 'astro:content';

const postOne = await getEntry('posts', 'one');

You can also move filters inside getCollection() to filter by arbitrary data properties:

const draftPages = await getCollection("posts", entry => entry.data.isDraft);

waxen wigeon May 24, 2023, 7:18 PM

#

formal fable May 24, 2023, 7:18 PM

#

Yep! getEntry is best for fetching a single post
https://docs.astro.build/en/reference/api-reference/#getentry

vale hawk May 24, 2023, 7:19 PM

#

waxen wigeon

Are you on Astro version 2.5?

#

If you aren't, you can use getEntryBySlug instead (imported from the same place)

waxen wigeon May 24, 2023, 7:19 PM

#

2.4.5

vale hawk May 24, 2023, 7:19 PM

#

Yep, try getEntryBySlug() first

waxen wigeon May 24, 2023, 7:20 PM

#

But I need collection not just an entry

#

I use
const pages = await getCollection('posts', entry => entry.slug.startsWith(lang));

#

But the thing is in the [slug].astro getCollection does not work

#

Even without filters.

#

Cannot read properties of undefined (reading 'data')

#

@vale hawk

vale hawk May 24, 2023, 7:24 PM

#

waxen wigeon Cannot read properties of undefined (reading 'data')

Hm, this seems setup-specific then...

waxen wigeon May 24, 2023, 7:24 PM

#

#

Here is my content folder

#

It's weird that the other file gets it without problems...

#

vale hawk May 24, 2023, 7:26 PM

#

Can I see a full error with stacktrace?

waxen wigeon May 24, 2023, 7:26 PM

#

The way it works is that when I access mydomain.com/langcode/posts, the pages/[lang]/posts.astro gets loaded up. But when I use pagination, I get routed to /pages/langcode/posts/page/[slug].astro

waxen wigeon May 24, 2023, 7:27 PM

#

vale hawk Can I see a full error with stacktrace?

TypeError: Cannot read properties of undefined (reading 'data')
    at eval (/src/pages/hu/posts/page/[slug].astro:60:149)
    at async renderPage (file:///media/theprime/ThePrime2/Projects/Antlify/antlify.github.io-wip/node_modules/astro/dist/runtime/server/render/page.js:96:30)
    at async renderPage (file:///media/theprime/ThePrime2/Projects/Antlify/antlify.github.io-wip/node_modules/astro/dist/core/render/core.js:102:18)
    at async renderPage (file:///media/theprime/ThePrime2/Projects/Antlify/antlify.github.io-wip/node_modules/astro/dist/core/render/dev/index.js:129:10)
    at async handleRoute (file:///media/theprime/ThePrime2/Projects/Antlify/antlify.github.io-wip/node_modules/astro/dist/vite-plugin-astro-server/route.js:156:20)
    at async run (file:///media/theprime/ThePrime2/Projects/Antlify/antlify.github.io-wip/node_modules/astro/dist/vite-plugin-astro-server/request.js:46:14)
    at async runWithErrorHandling (file:///media/theprime/ThePrime2/Projects/Antlify/antlify.github.io-wip/node_modules/astro/dist/vite-plugin-astro-server/controller.js:65:5)
    at async handleRequest (file:///media/theprime/ThePrime2/Projects/Antlify/antlify.github.io-wip/node_modules/astro/dist/vite-plugin-astro-server/request.js:40:3)

#

Here you go

#

#

The lines around 60

vale hawk May 24, 2023, 7:27 PM

#

Iiiiiinteresting. Was going to say this doesn't look like an Astro internal error

#

Aside: theprime is a cool username 😅

waxen wigeon May 24, 2023, 7:28 PM

#

ty:D

vale hawk May 24, 2023, 7:29 PM

#

Try logging pages?

waxen wigeon May 24, 2023, 7:29 PM

#

I think you would cringe out on it's origin: I tought of usernames, and I watched Prime, a TV channel in our country, where they stream good movies. And I liked it's name, I modified it and here we go

vale hawk May 24, 2023, 7:29 PM

#

I'm going off of the slug.astro you posted above. Is pages a direct call getCollection()?

waxen wigeon May 24, 2023, 7:29 PM

#

vale hawk Try logging `pages`?

Inside the map? or where?

waxen wigeon May 24, 2023, 7:30 PM

#

vale hawk I'm going off of the `slug.astro` you posted above. Is `pages` a direct call `ge...

#

But even if I use with filter, same error

vale hawk May 24, 2023, 7:30 PM

#

waxen wigeon Inside the map? or where?

This is what I'd try if it matches the slug.astro you sent:

---
import BlogCard from "@/components/BlogCard.astro";
import Pagination from "@/components/Pagination.astro";
import config from "@/config/config.json";
import Base from "@/layouts/Base.astro";
import { getSinglePage } from "@/lib/contentParser.astro";
import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
import { sortByDate } from "@/lib/utils/sortFunctions";
import PageHeader from "@/partials/PageHeader.astro";
import PostSidebar from "@/partials/PostSidebar.astro";
import { getLangFromUrl, useTranslations } from '../../../../i18n/utils';
import { getEntryBySlug, getCollection } from "astro:content";
const lang = getLangFromUrl(Astro.url);

const { blog_folder } = config.settings;
const { slug } = Astro.params;
const postIndex = await getEntryBySlug<any, string>(blog_folder, "index");
const pages = await getCollection("posts");
console.log(pages);
...

waxen wigeon May 24, 2023, 7:31 PM

#

#

There is content

#

In the log appears perfectly.

#

🙂

vale hawk May 24, 2023, 7:31 PM

#

Yeah, looks fine...

waxen wigeon May 24, 2023, 7:31 PM

#

Weird

vale hawk May 24, 2023, 7:31 PM

#

Seems to be an issue in BlogCard then. Try passing data={post.data} instead (not knowing anything about what blogcard does)

waxen wigeon May 24, 2023, 7:32 PM

#

vale hawk Seems to be an issue in `BlogCard` then. Try passing `data={post.data}` instead ...

But BlogCard is also present in the other one and it's working

#

#

The other (working) one

#

📎 posts.astro

#

/src/pages/[lang]/posts.astro

vale hawk May 24, 2023, 7:34 PM

#

Got it. Can you share BlogCard?

waxen wigeon May 24, 2023, 7:41 PM

#

Yep, gimme a second

#

---
import { Image } from "@astrojs/image/components";
import config from "@/config/config.json";
import { humanize, plainify, slugify } from "@/lib/utils/textConverter";
import { FaRegFolder, FaRegUserCircle } from "react-icons/fa/index.js";

const { summary_length, blog_folder } = config.settings;
const { data } = Astro.props;
const { title, image, date, author, categories, domain } = data.data;
---

<div class="bg-body dark:bg-darkmode-body">
  {
    image && (
      <Image
        class="mb-6 w-full rounded"
        src={image}
        alt={title}
        width={590}
        height={200}
      />
    )
  }

 <ul class="mb-4">
     <li class="mr-4 inline-block">
       {
         categories.map((category: string, index: number) => (
           <a href={`/categories/${slugify(category)}`}>
             {humanize(category)}
             {index !== categories.length - 1 && ","}
           </a>
         ))
       }
     </li>
   </ul>
  <h4 class="mb-3">
    <a href={`/${blog_folder}/${data.slug}`}>
      {title}
    </a>
  </h4>

  <p class="mb-6">{plainify(data.body?.slice(0, Number(summary_length)))}</p>
  <a
    class="btn btn-outline-primary btn-sm lowercase"
    href={`https://${domain}`}
    target="_blank"
  >
    {domain}
  </a>
</div>

#

The weird thing is that I'm calling the same thing, the same dataset, the same component.

waxen wigeon May 24, 2023, 7:44 PM

#

vale hawk Got it. Can you share `BlogCard`?

Here you go

vale hawk May 24, 2023, 7:48 PM

#

Interesting, this seems right to me...

#

Trouble is we don't know which data is failing. data or data.data

#

I might try removing the map => BlogCard portion of your [slug].astro to see if that's even the issue

#

If it is, star debugging Astro.props. Could be an issue somewhere we aren't seeing

waxen wigeon May 24, 2023, 7:53 PM

#

vale hawk I might try removing the `map => BlogCard` portion of your `[slug].astro` to see...

Removed it and now gives the same error to line 59, which for now is a </div>

#

It's disturbing that it does not giving the exact line where is the problem

#

Gives me C/Assembly vibes

vale hawk May 24, 2023, 7:56 PM

#

sigh the classic sourcemap problem...

#

Believe me, we've spent many hours trying

waxen wigeon May 24, 2023, 7:57 PM

#

HA

#

GOTIT

#

<Base
title={postIndex.data.title}
meta_title={postIndex.data.meta_title}
image={postIndex.data.image}
description={postIndex.data.description}

#

See this?

#

smth.DATA.smth

#

🙂

#

I changed it to what the other one has and boom

#

😄

vale hawk May 24, 2023, 7:58 PM

#

Ahhhh heck 😅

#

Woo!

#

Pain of using data as a name in CS: what is a data

waxen wigeon May 24, 2023, 8:02 PM

#

It would be good to have an exact line error thing, but well, if u cant, u cant..

#

At least u tried to make one

#

lol

#Cannot read properties of undefined (reading 'data')