Theo's Typesafe Cult•4w ago

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]....

4 Replies

Solution

mchisolm0•4w 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•4w ago

I'm not sure where I can mark this as resolved, though.

michaeldrotar•4w ago

Can you right-click your own message > apps > mark solution?

mchisolm0•4w ago

That works. Thank you so much!

Gaming

Programming

TypeErrorinitialTree is not iterable in Modern React Tutorial vid