TypeErrorinitialTree is not iterable in Modern React Tutorial vid

The images map correctly until I try clicking on one, so I think the error may be misleading me. I believe I have the modal set up to show the id at the bottom of the screen as shown in the tutorial, however, when I click the image I get the global error page. Sentry captures the above "initialTree is not iterable" which seems to mean I'm trying to map something that can't be mapped. file: app/page.tsx
return (
<main className="">
<div className="flex flex-wrap justify-center gap-4">
{images.map((image) => (
<div key={image.id} className="flex h-48 w-48 flex-col">
<Link href={`/img/${image.id}`}>
<Image
src={image.url}
alt={image.name}
style={{ objectFit: "contain" }}
width={480}
height={480}
/>
</Link>
<div>{image.name}</div>
</div>
))}
</div>
</main>
);
}
return (
<main className="">
<div className="flex flex-wrap justify-center gap-4">
{images.map((image) => (
<div key={image.id} className="flex h-48 w-48 flex-col">
<Link href={`/img/${image.id}`}>
<Image
src={image.url}
alt={image.name}
style={{ objectFit: "contain" }}
width={480}
height={480}
/>
</Link>
<div>{image.name}</div>
</div>
))}
</div>
</main>
);
}
file: server/queries.ts
export async function getMyImages() {
const user = auth();

if (!user.userId) throw new Error("Unauthorized");

const images = await db.query.images.findMany({
where: (model, { eq }) => eq(model.userId, user.userId),
orderBy: (model, { desc }) => desc(model.id),
});

return images;
}
export async function getMyImages() {
const user = auth();

if (!user.userId) throw new Error("Unauthorized");

const images = await db.query.images.findMany({
where: (model, { eq }) => eq(model.userId, user.userId),
orderBy: (model, { desc }) => desc(model.id),
});

return images;
}
Solution:
I figured it out now. I misunderstood the folder structure. Correct: app/@modal/(.)img/[id]/ My error was thinking the (.) was another layer of the directory making it app/@modal/(.)/img/[id]....
Jump to solution
4 Replies
Solution
mchisolm0
mchisolm05w ago
I figured it out now. I misunderstood the folder structure. Correct: app/@modal/(.)img/[id]/ My error was thinking the (.) was another layer of the directory making it app/@modal/(.)/img/[id].
mchisolm0
mchisolm05w ago
I'm not sure where I can mark this as resolved, though.
michaeldrotar
michaeldrotar5w ago
Can you right-click your own message > apps > mark solution?
mchisolm0
mchisolm05w ago
That works. Thank you so much!
Want results from more Discord servers?
Add your server
More Posts