Error when trying to host 3.0 Demo on Cloudflare Pages (Edge Runtime)

[todor0v]

Upon trying to host the 3.0 Demo on Cloudflare Pages I get this error:

The following routes were not configured to run with the Edge Runtime:
  - /api/[...slug]
  - /api/graphql-playground
  - /api/graphql
  - /admin/[[...segments]]
Please make sure that all your non-static routes export the following edge runtime route segment config:
  export const runtime = 'edge';

If I add the nodejs_compat flag to CF compatibility flags and export const runtime = 'edge' to the appropriate Payload page.ts and route.ts files (even though I know I shouldn't), I get Module not found: Can't resolve 'path' (fs and stream) all connected to node_modules/atomically and node_modules/busboy.

In the demo video @jmikrut mentioned that we are close to Edge Runtime support. I assume I have those errors because we are not there yet.

[jmikrut]

Correct, we're not there just yet. But - this is super interesting. What are the steps that you're following to deploy to Cloudflare Pages?

I will convert this to a discussion on the main Payload repo so we can track conversation accordingly.

[todor0v]

@jmikrut Thank you for all the suggestions! Here are roughly the steps that I took:

1. I took my existing Next.js 14 project that was hosted on Vercel
2. I used npx create-payload-app@beta to install Payload. This pretty much worked on Vercel out of the box. The only change I had to make was to add revalidatePath on afterChange so the content changes are visible as soon as you make any from the panel:

(Home.ts)

hooks: {
   afterChange: [
      ({ req, doc }) => {
         revalidatePath("/");
      },
   ]
}

3. I am using the Payload local API to get my data. I also added authentication using Next Auth (5 beta) that supports running on edge and a custom auth strategy. All of that worked on Vercel.
4. I used the Cloudflare Full-stack Next.js guide in order to host Next.js on its own on Cloudflare Pages. I then merged with my Payload branch.
5. I added the nodejs_compat comparability flag to the CF Functions.
6. I used bun. It actually worked better than node. (though I do get a message: "The project is set up for bun but it is currently being run via npm")
7. I got the original "following routes were not configured to run with the Edge Runtime" error.
8. I added export const runtime = "edge"; to the layout.tsx file inside app/(payload).
9. I ran into the original errors: Module not found: Can't resolve 'path' (fs and stream)

I am pretty sure that this will be possible at some point. Like you mentioned in the video, Payload is already the proper size. Now the compatibility issues are left.

[kimstewartca]

Hi, were you able to get Payload v3 running on Cloudflare Pages? I am experiencing the same build error in Cloudflare Pages, and as of right now I can only get it working on Vercel.

[todor0v]

@kimstewartca Unfortunately no. As I understand from @jmikrut some changes will be required in Payload 3.0 but it should be possible in the future.

[jmikrut]

@todor0v — what database adapter were you using? No errors from the DB adapter?

[todor0v]

@jmikrut I will write the full steps I went through in a bit. I am using the mongooseAdapter. I have not faced any errors there. Or at least I don't think the errors I see are from that.

[jmikrut]

One more thought here for anyone who is interested in testing further on this.

If you add a fallback for fs, stream and path to your next.config.js file's Webpack config, you might be able to get around these issues.

[jmikrut]

I think you'd want to do that on the server and not for client. The server code is what is executed in cloudflare workers.

Also, I wouldn't expect this to work right away - I'd just expect a different error. Because we do indeed use fs still in certain cases, but I think we might be able to work around those one by one.

Last note - Mongoose actually is not compatible with Cloudflare Workers as far as I know. If you do want to deploy on Cloudflare, you might have to use Postgres - but let me know!

[todor0v]

@jmikrut That is correct yes. Has to be on the server! I had to keep going until I see a different error 😆

webpack: (config, { isServer }) => {
   if (isServer) {
      config.resolve.fallback = {
      fs: false,
      stream: false,
      path: false,
      os: false,
      crypto: false,
      tty: false,
      readline: false,
      child_process: false,
      worker_threads: false,
   };
}

Now I get the following for both path and os:

node:os
Module build failed: UnhandledSchemeError: Reading from "node:os" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

As for the database. Even though in the CloudFlare docs they do have a guide for MongoDB, that still uses a rest API, whereas I just want to provide Payload with the database URL. So that is correct. I will need to move to Postgres if I want it hosted on CF D1. However, I should be able to use a connection to Atlas for now. Nevertheless if I do get any errors that are connected to the database, I am prepared to switch to Postgres. I actually started that process. I saw that the Payload Postgres Adapter on the beta branch is using Drizzle so I made sure to install that since it should be supported on D1. Let me know if you believe that I should move to Postgres first and then try to fix the fs, stream etc error.

[jbwashington]

@todor0v just a heads up, i'm using Postgres adapter and running into the same problems with payload 3.0 beta and Nextjs 14:

13:56:14.290 | ⚡️ 	The following routes were not configured to run with the Edge Runtime:
-- | --
13:56:14.290 | ⚡️ 	  - /admin/[[...segments]]
13:56:14.291 | ⚡️ 	  - /api/[...slug]
13:56:14.291 | ⚡️ 	  - /api/graphql-playground
13:56:14.291 | ⚡️ 	  - /api/graphql
13:56:14.291 | ⚡️ 	  - /[slug]
13:56:14.291 | ⚡️ 	  - /posts/[slug]
13:56:14.291 | ⚡️ 	  - /projects/[slug]
13:56:14.291 | ⚡️
13:56:14.291 | ⚡️ 	Please make sure that all your non-static routes export the following edge runtime route segment config:
13:56:14.291 | ⚡️ 	  export const runtime = 'edge';

[janus-reith]

I'm wondering, has someone been successful yet with Deploying Payload to CF Pages yet after setting runtime = 'edge' on all routes and using Drizzle, or are there other roadblocks that maybe surfaced after that?

[todor0v]

@janus-reith As explained in the steps I took here. You can use export const runtime = "edge"; in the layout.tsx file inside app/(payload). This way it will apply to all routes. However, this doesn't fix the later dependencies issues.

[janus-reith]

Related: brianc/node-postgres#3206

[aretrace]

@jmikrut, is there a loose timeline for official serverless Cloudflare support?

[internalG]

It seems all nextjs + postgres projects hit this edge wall now.

[0xRapid]

I think this is surely one of the more interesting approaches, I only came around payload today and I was instantly thinking of hosting it in cloudflare, would love more out of the box support though!

[BohdanK-W32]

Sure thing, looks like a must-have for now.
Also, PayloadCMS 3 don't have an image optimization API for now. Hope it will be added soon, so we can use other providers, not sharp only (which is impossible on Cloudflare, due to multi-threading requirement for sharp).

[rcotrina94]

Maybe using Cloudflare Images?

[ammi1378]

I tried it and uploading to Cloudflare R2 worked well on my machine, unfortunately i didn't had the time to deploy it on cloudflare pges or workers. '@payloadcms/storage-s3' package works great for this.

it would be good to be able to disable payload image optimzation and let cloudflare take over it by using their images service which i belive is compatible with their R2 service.

i'm willing to investigate in this subject if someone from the team could guide me. @jmikrut

[parsadotsh]

I think adding a flexible and simple "url" resizer option, i.e. just redirect the image to another service like "https://resizer.site.com/?image=link.to.image.com&size=400,800" that handles resizing. Then developers can implement their own service using libraries like https://github.com/fineshopdesign/cf-wasm (or this could be integrated too!)

https://github.com/fineshopdesign/cf-wasm On cloudflare at least, doesn't work for huge files but it's definitely usable for the majority of cases.