Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🐛When following Layout examples (copy paste): <Debug answer={Astro.props} /> comes up empty and url is not recognized #849

Closed
PrimalOutshoot opened this issue Aug 10, 2023 · 1 comment
Closed

🐛When following Layout examples (copy paste): <Debug answer={Astro.props} /> comes up empty and url is not recognized #849

PrimalOutshoot opened this issue Aug 10, 2023 · 1 comment
Labels
needs triage Issue needs to be triaged

Comments

@PrimalOutshoot
Copy link

PrimalOutshoot commented Aug 10, 2023 •
edited
Loading

What version of @astrojs/compiler are you using?

Latest version of Astro and plugins

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

runtime error: index out of range [0] with length 0
Astro.props not passing { props } , empty, url not recognized

I am following the documentation examples and am finding that this results in multiple errors:

---
import type { MarkdownLayoutProps } from 'astro';

type Props = MarkdownLayoutProps<{
  // Define frontmatter props here
  title: string;
  author: string;
  date: string;
}>;

// Now, `frontmatter`, `url`, and other Markdown layout properties
// are accessible with type safety
const { frontmatter, url } = Astro.props;
---
<html>
  <head>
    <link rel="canonical" href={new URL(url, Astro.site).pathname}>
    <title>{frontmatter.title}</title>
  </head>
  <body>
    <h1>{frontmatter.title} by {frontmatter.author}</h1>
    <slot />
    <p>Written on: {frontmatter.date}</p>
  </body>
</html>

Cannot read properties of undefined (reading 'title'), and when I added the url part, it cannot read the url. I tried to console.log(Astro.props); but that did not result in any assist. When I however used

I received the message:
runtime error: index out of range [0] with length 0
See Docs Reference
This is almost always a problem with the Astro compiler, not your code. Please open an issue at https://astro.build/issues/compiler.

Currently I am just following along with the documentation/examples - everything was going wonderful until hitting that snag.

Link to Minimal Reproducible Example

https://docs.astro.build/en/core-concepts/layouts/#markdownmdx-layouts

Update: I thought the crashing that resulted in Runtime error, out of bounds - was actually debug working and telling me that the reason I am getting errors with the astro/example was because of index out of bounds. But then I saw elsewhere that it is because the debug component is not inside the element, so I corrected that, and my page loaded to tell me that Astro.props, is not passing props from the defined list as shown in the documentation's examples.

Astro's example code works when props and url are commented out or removed.

loads empty { } there's nothing in it. I am not sure why props and url are not passing - I am using the starlight theme and am not sure if that makes a difference.
@PrimalOutshoot PrimalOutshoot changed the title 🐛 BUG: Runtime error: index out of range [0] with length 0 - when following Layouts Examples 🐛When following Layout examples (copy paste): <Debug answer={Astro.props} /> comes up empty and url is not recognized Aug 10, 2023
@Princesseuh Princesseuh added the needs triage Issue needs to be triaged label Nov 12, 2023
@MoustaphaDev
Copy link
Member

I can't reproduce this, looks like it was fixed a some point? See my reproduction
Feel free to reopen this if you still encounter the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs triage Issue needs to be triaged
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Princesseuh @MoustaphaDev @PrimalOutshoot