Cloudflare Pages Big-AGI [trpc].func not configured to run with the Edge Runtime

[centminmod]

I just tried latest Big-AGI update for Cloudflare AI Gateway support #164 on Cloudflare Pages, but it failed to build with specific Cloudflare Pages log error. Prior build that worked was when I built it 3 weeks ago. Attached is full Cloudflare Pages build log.

2023-10-19T07:26:32.281419Z ⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
2023-10-19T07:26:32.281601Z ⚡️ 
2023-10-19T07:26:32.281741Z ⚡️  The following functions were not configured to run with the Edge Runtime:
2023-10-19T07:26:32.281908Z ⚡️    - [trpc].func
2023-10-19T07:26:32.282042Z ⚡️ 
2023-10-19T07:26:32.282207Z ⚡️  If this is a Next.js project:
2023-10-19T07:26:32.282333Z ⚡️ 
2023-10-19T07:26:32.282459Z ⚡️  - you can read more about configuring Edge API Routes here: https://nextjs.org/docs/api-routes/edge-api-route
2023-10-19T07:26:32.282557Z ⚡️  
2023-10-19T07:26:32.282788Z ⚡️  - you can try enabling the Edge Runtime for a specific page by exporting the following from your page:
2023-10-19T07:26:32.28297Z  ⚡️ 
2023-10-19T07:26:32.283141Z ⚡️      export const config = { runtime: 'edge' };
2023-10-19T07:26:32.283305Z ⚡️ 
2023-10-19T07:26:32.283405Z ⚡️  - or you can try enabling the Edge Runtime for all pages in your project by adding the following to your 'next.config.js' file:
2023-10-19T07:26:32.283499Z ⚡️ 
2023-10-19T07:26:32.283618Z ⚡️      const nextConfig = { experimental: { runtime: 'edge'} };
2023-10-19T07:26:32.2839Z ⚡️ 
2023-10-19T07:26:32.284062Z ⚡️  You can read more about the Edge Runtime here: https://nextjs.org/docs/advanced-features/react-18/switchable-runtime
2023-10-19T07:26:32.284228Z 
2023-10-19T07:26:32.331768Z Failed: build command exited with code: 1
2023-10-19T07:26:33.212081Z Failed: error occurred while running build command

failed-build.txt

[enricoros]

I don't know what's the issue here. Recently there has been a change to allow for Prisma to run (not sure if that's the culprit). Basically most pages are on the Edge runtime, but some are on the traditional (Node) runtime.
Is this the issue?

Unfortunately I had to activate both runtimes because Prisma does not (yet) run on the Edge runtime - although they're porting it as we talk.

[enricoros]

I see from the log that it gets to the end of the build.. and the app is all well made, but then it fails to deploy.

Can you enable the node.js runtime on Pages?

From the bottom of this:
https://developers.cloudflare.com/workers/runtime-apis/nodejs/

[centminmod]

You mean add --compatibility-flags="nodejs_compat" or just nodejs_compat?

[enricoros]

You know way better. I don't even have a CloudFlare account :)

[centminmod]

Ok. I'm reaching out to a friend who works on Cloudflare Pages team :)

[tmikaeld]

I'm unable to get it to work, seems to need a specific trpc adapter for CF edge.

[enricoros]

Found a workaround which removes the PRISMA/DB capabilities, but at least the App keeps building:

Documented in:
https://github.com/enricoros/big-agi/blob/main/docs/deploy-cloudflare.md

[centminmod]

Sweet @enricoros workaround working nicely 👍

07:02:08.045	Deploying your site to Cloudflare's global network...
07:02:10.372	Parsed 1 valid header rule.
07:02:11.743	Uploading... (95/126)
07:02:12.851	Uploading... (105/126)
07:02:12.909	Uploading... (116/126)
07:02:13.549	Uploading... (126/126)
07:02:13.549	✨ Success! Uploaded 31 files (95 already uploaded) (2.41 sec)
07:02:13.550	
07:02:14.037	✨ Upload complete!
07:02:16.871	Success: Assets published!
07:02:25.590	Success: Your site was deployed!

[enricoros]

Sorry we need to resort to this. I would love to have only Edge runtime endpoints, but Prisma for Postgres cannot run right now.

Cost me double the work to have both edge and node endpoints, and lots of tRPC magic.

As Prisma folks are working on it, I'll monitor, and can't wait to go back to a single nice Edge runtime.

On the other hand I tried Cloudflare and it's a pretty good solution!

[centminmod]

No worries, I don't use the functionality that was lost with the workaround, so isn't missed. Thanks for all your hard work on Big-AGI :)

On the other hand I tried Cloudflare and it's a pretty good solution!

Yes it is and Cloudflare Pages is free ^_^. Big-AGI is my first next.js project using Cloudflare Pages 😁

[tmikaeld]

The instructions still need the nodejs_compat flag to be added in functions.

But other than that, it works perfectly now! Thanks a lot @enricoros, you're awesome!

[enricoros]

@tmikaeld oh really? I thought with the workaround the compat flag was not needed anymore. Are you 100% sure? Just want to make sure the instructions are simple and correct.

[tmikaeld]

@enricoros Well, I did upgrade what i had and removed all env. variables, since they're not needed any more. I also removed the flag at first, which then showed an error page that it is needed, after adding it and re-building it worked. So yeah, 99% sure ;)

And of course, I selected next.js in the dropdown and changed the build command. Left the rest as is.

[enricoros]

Ok, let's edit the page then :)

[centminmod]

Yeah my successful build on Cloudflare Pages was with nodejs_compat flag I added earlier - I never removed it after I added so can't confirm if it would of built without it.

[enricoros]

Confirmed; the compat flag was necessary. Updated the docs (including an image) accordingly.

[JDR42]

@enricoros Could the above be why browse functionality is broken with a CF instance?

Ex: when pasting a URL, DevTools shows:
https://my-cloudflare-website.com/api/trpc-node/browse.fetchPages 404 (Not Found)
and then
TRPCClientError: Unexpected end of JSON input at s.from (https://my-cloudflare-website.com/_next/static/chunks/pages/_app-9e6c39c6db48c185.js:91:35197) at https://my-cloudflare-website.com/_next/static/chunks/pages/_app-9e6c39c6db48c185.js:91:37981

[enricoros]

@JDR42 yes, paradoxically the CloudFlare Puppeteer library requires nodejs, but CloudFlare only supports the Edge runtime - so browsing and Sharing of chats is not supported on a CloudFlare instance.