Next.js Discord

Discord Forum

preload function failed on build time

Answered
AM posted this in #help-forum
Open in Discord
AMOP
So i'm trying preload pattern https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#preloading-data I have defined a preload function in my details page and in my list i'm using this function to preload item details.

However when i run the build command i get this error:

app/[fname]/[hash]/page.tsx
Type error: Page "app/[fname]/[hash]/page.tsx" does not match the required types of a Next.js Page.
  "preloadCastDetails" is not a valid Page export field.


but as it says here it can be named however i want? The preload function can also have any name as it's a pattern, not an API.

any ideas?
Answered by Asian paper wasp
OK, so it seems that Next.js is trying to validate the exports. Yeah, I guess it is due to poor documentation on Next.js part.

As an alternative, may be instead of creating a preload() function, just call

void fetchCastsByUrlAction({
  url: `https://warpcast.com/${fname}/${hash}`,
});


when you need to preload?
View full answer

15 Replies

AMOP
i also tried renaming it to preload but again the same error, it is located in a component on page B and is called from component on page A could be this one the issue?
Asian paper wasp
No idea...
Since you are not posting any code
AMOP
ok sorry is bit to much the code but i'll try to give an example
this is the details page that defines preload function is located

/app/[fname]/[hash]

type CastDetailsPageProps = {
  params: { fname: string; hash: string };
};

export const preload = ({ fname, hash }: { fname: string; hash: string }) => {
  void fetchCastsByUrlAction({
    url: `https://warpcast.com/${fname}/${hash}`,
  });
};

export default async function CastDetailsPage({
  params: { fname, hash },
}: CastDetailsPageProps) {
  const cast = await fetchCastsByUrlAction({
    url: `https://warpcast.com/${fname}/${hash}`,
  });

  if (!cast) {
    return (
      <main className="grid grid-cols-1 gap-4 py-28 p-6 md:p-10 place-items-center mx-auto md:w-[666px] md:bg-neutral-900 md:mt-10 rounded-[20px]">
        <Label className="text-white text-base">Frame not found</Label>
      </main>
    );
  }

  return (
    <main className="grid grid-cols-1 gap-4 py-28 p-6 md:p-10 place-items-center mx-auto md:w-[666px] md:bg-neutral-900 md:mt-10 rounded-[20px]">
      <div className="w-full md:w-[580px] space-y-5">
        <div className="space-y-4 md:space-y-12 self-start">
          <GoBackBtn />
        </div>
        <Suspense fallback={<CardLoadingSkeleton />}>
          {cast?.frames?.map((frame, idx) => (
            <CastCard key={`${cast.hash}-${idx}`} cast={cast} frame={frame} />
          ))}
        </Suspense>
        <Suspense fallback={<CastCommentsLoadingSkeleton />}>
          <CastCommentsList hash={cast?.hash} />
        </Suspense>
      </div>
    </main>
  );
and when try to built it throws:

app/[fname]/[hash]/page.tsx
Type error: Page "app/[fname]/[hash]/page.tsx" does not match the required types of a Next.js Page.
  "preload" is not a valid Page export field.
Asian paper wasp
OK, so it seems that Next.js is trying to validate the exports. Yeah, I guess it is due to poor documentation on Next.js part.

As an alternative, may be instead of creating a preload() function, just call

void fetchCastsByUrlAction({
  url: `https://warpcast.com/${fname}/${hash}`,
});


when you need to preload?
Answer
AMOP
i see let me try 🙏
AMOP
yeah it works man 👏
can you help me understand something, so far i was using prefetch and i was thinking that is fetching whole page along side with the data, is it fetching only the html structure of the page and not the data? For data we use "preload" pattern
Asian paper wasp
If you are referring to Link prefetch, I think both the HTML and the data fetching associated' to it are prefetched
AMOP
yes link or router.prefetch via next/navigation
hmm so prefetch > preload
and this one is kinda redundant:
prefetch is fetching detail pages and fetches are fetching details data
but if prefetch is also fetching details data