use a cdn image instead of a github image for website template to avoid "TypeError: fetch failed"

[feitian124]

Describe the Bug

I try to use payloadcms website template following the guide, but when i seed the database, it is failed and the console only report a 500 error like below:

[12:35:20] INFO: Seeding database...
[12:35:20] INFO: — Clearing collections and globals...
[12:35:20] INFO: — Seeding demo author and user...
[12:35:20] INFO: — Seeding media...
 POST /next/seed 500 in 3293ms
 ✓ Compiled in 2.8s (5853 modules)

at first i thought maybe it does not works well with sqllite? since the guide use mongodb or postgresql.
but after some research and debug, i find it is related to below function, it will report TypeError: fetch failed error.

async function fetchFileByURL(url: string): Promise<File> {
  const res = await fetch(url, {
    credentials: 'include',
    method: 'GET',
  })
   ...
}

and i find a related issue "TypeError: fetch failed" is an incomplete error: fetch in Server Component, if throws and isn't caught, loses info vercel/next.js#49896
Apparently, I also encountered this problem. I spent several hours trying to fix it, but without success. It wasn't until I replaced the image that things changed. The previous image was hosted on GitHub, and I switched it to an image hosted on a CDN. It seems that the images hosted on GitHub are not friendly to the fetch function.

  const [image1Buffer, image2Buffer, image3Buffer, hero1Buffer] = await Promise.all([
    fetchFileByURL(
      'https://raw.githubusercontent.com/payloadcms/payload/refs/heads/main/templates/website/src/endpoints/seed/image-post1.webp',
    ),
    fetchFileByURL(
      'https://raw.githubusercontent.com/payloadcms/payload/refs/heads/main/templates/website/src/endpoints/seed/image-post2.webp',
    ),
    fetchFileByURL(
      'https://raw.githubusercontent.com/payloadcms/payload/refs/heads/main/templates/website/src/endpoints/seed/image-post3.webp',
    ),
    fetchFileByURL(
      'https://raw.githubusercontent.com/payloadcms/payload/refs/heads/main/templates/website/src/endpoints/seed/image-hero1.webp',
    ),
  ])

This isn't a complicated problem, but it is indeed a hurdle for beginners and a waste of time.

Therefore, I suggest changing these images to some images hosted on a CDN(or local) instead of hosted on Github which have less possibilty for fetch function to has error .

Link to the code that reproduces this issue

https://github.com/feitian124/wearit

Reproduction Steps

• pnpx create-payload-app
• pnpm dev
• on the admin page, click seed link, it should report error 500

Which area(s) are affected? (Select all that apply)

area: templates

Environment Info

Binaries:
  Node: 22.11.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: 9.15.3
Relevant Packages:
  payload: 3.16.0
  next: 15.1.4
  @payloadcms/email-nodemailer: 3.16.0
  @payloadcms/graphql: 3.16.0
  @payloadcms/live-preview: 3.16.0
  @payloadcms/live-preview-react: 3.16.0
  @payloadcms/next/utilities: 3.16.0
  @payloadcms/payload-cloud: 3.16.0
  @payloadcms/plugin-form-builder: 3.16.0
  @payloadcms/plugin-nested-docs: 3.16.0
  @payloadcms/plugin-redirects: 3.16.0
  @payloadcms/plugin-search: 3.16.0
  @payloadcms/plugin-seo: 3.16.0
  @payloadcms/richtext-lexical: 3.16.0
  @payloadcms/translations: 3.16.0
  @payloadcms/ui/shared: 3.16.0
  react: 19.0.0
  react-dom: 19.0.0
Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Mon Aug 7 19:01:48 UTC 2023
  Available memory (MB): 7627
  Available CPU cores: 16

[github-actions]

Please add a reproduction in order for us to be able to investigate.

Depending on the quality of reproduction steps, this issue may be closed if no reproduction is provided.

Why was this issue marked with the invalid-reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository created with create-payload-app@beta -t blank or a forked/branched version of this repository with tests added (more info in the reproduction-guide).

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue. Ensure your reproduction does not depend on secrets, 3rd party registries, private dependencies, or any other data that cannot be made public. Avoid a reproduction including a whole monorepo (unless relevant to the issue). The easier it is to reproduce the issue, the quicker we can help.

Please test your reproduction against the latest version of Payload to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

Useful Resources

• Reproduction Guide
• Contributing to Payload

[feitian124]

i am from china so i have to use a proxy to access github, i am not sure if it is caused by the proxy.
but since vercel/next.js#49896 met similiar problem,
i think it is more likely caused by github hosted image not works well with fetch function.