TypeError Cannot destructure property 'posts' of '(0 , import_react27.useLoaderData)(...)' as it is

[minor whale]

Getting the error
TypeError: Cannot destructure property 'posts' of '(0 , import_react27.useLoaderData)(...)' as it is undefined.

My code is:
`import { useLoaderData } from "@remix-run/react";
import { Link } from "@remix-run/react";
import moment from "moment";
import { getClient } from "~/lib/sanity/getClient";
import { urlFor } from "~/lib/sanity/sanity";

// loader() must be async!
export async function loader() {
const posts = await getClient().fetch(
*[_type == "post"]{ _id, title, slug, author, "authorName": author->name, "authorImage": author->image, mainImage, publishedAt, categories, excerpt, myTags, featuredPost, "categoryName": *[_type == 'category' && _id in ^.categories[]._ref]{title, slug}, } | order(publishedAt desc)
);

return { posts };
}

export default function LatestBlogPosts() {
let { posts } = useLoaderData();

return (
<section className="">
<div className="relative pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
<div className="absolute inset-0">
<div className="h-1/3 sm:h-2/3" />
</div>
<div className="relative mx-auto">
<div className="text-left">
<h2 className="text-7xl tracking-tight font-black text-richBlack">
ALL POSTS
</h2>
</div>
<div className="mt-12 grid gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 lg:max-w-none">
{posts?.length > 1
? posts.slice(0, 12).map((post: any) => (`

Any help?

[fickle glacier]

Are you sure posts returned from your getClient().fetch() is valid? console.log(posts) in your loader.

[minor whale]

It's valid, it's working on another page

Just not working on this

[fickle glacier]

then in your route component don't destructure posts. It looks to me like your loader is return null/undefined, so useLoaderData doesn't have the data... without seeing your code (or results), i can only guess.

let data = useLoaderData()
console.log(data)
let { posts } = data

[minor whale]

Using that produces this error:
TypeError: Cannot destructure property 'posts' of 'data' as it is undefined.

[fickle glacier]

Again, you need to figure out why your loader is NOT returning data.

[minor whale]

It's returning data here, on another page using the same fetch

[fickle glacier]

That's fine... but you need to figure out why it's not working on THIS page

Is the code the exact same on both pages?

[minor whale]

Pretty much, yes. The only thing that is different is that they're in different directories. The one that isn't working is a component being called and the one that is working is a route

[fickle glacier]

loaders only work from routes, not components. That's why userLoaderData is returning null... the loader was never called

[minor whale]

What should I do instead?

@fickle glacier should I make the fetch on the index route?

[fickle glacier]

You should have the loader on whatever route the component is on

if you want to keep the loader on the component, you just need to import that as well

// routes/index.tsx
import Component from '~/components/component.tsx'
export { loader } from '~/components/component.tsx'

default function Route() {
  return <Component/>
}

[minor whale]

Is there a guide on this I could follow? I'm getting lost on this now

I'm not sure what happened - I didn't change anything - But it's now working

Would still love a guide if you know of one, where I could get a detailed explanation of all this (Remix's docs don't go into much detail)

[fickle glacier]

Hmm.. just know that all of Remix is dependent on routes: loaders, actions, ErrorBoundary, etc. It sits on top of React Router. So just because you export from a component, doesn't mean they participate in the the whole data process.

I was just letting you know that if you want to use loaders defined elsewhere (like a component), you import that function just like you would do for any other code and export it from the route file so Remix picks it up. It's not magic.

If you have a specific question, feel free to ask.