Error: validateFrameEmbed 400 - Missing image URL

[nestorbonilla]

Describe the bug

NextJS app created with CLI fails on Warpcast frame validator both locally (via ngrok) and after deployment to Vercel, despite working as intended in the local frog debug tool. Frame loads successfully locally, but with a broken image after deployment. Screenshots on minimal reproducible example repo.

Link to Minimal Reproducible Example

https://github.com/nestorbonilla/frame-image-error

Steps To Reproduce

• bunx create-frog
• set the name and type of project nextjs
• install dependencies
• bun dev
• get ngrok url from http://localhost:3000
• try this link on warcast + /api

Frog Version

0.11.6

TypeScript Version

=5.0.4

Check existing issues

• [X] I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

[dalechyn]

NextJS app created with CLI fails on Warpcast frame validator both locally (via ngrok) and after deployment to Vercel

Just want to take a note here that Frog is not maintaining support of ngrok or any other based proxy server solutions to test out a local frame in WC Validator, so given that it might not work in certain environments, specifically in your case – in NextJS.

However, I cloned your repo and deployed a Vercel deployment at https://nestor-frog-11jun.vercel.app/ from https://github.com/dalechyn/nestor-frog-11jun/tree/main and it seems to work just fine in WC Validator: https://warpcast.com/~/developers/frames?url=https://nestor-frog-11jun.vercel.app/api.

Using ngrok as an escape hatch to what's not implemented in Frog Devtools yet (Cast Action, Error responses), sounds like a good solution which I personally recommend to folks in Discord but without an actual guarantee that this would work, as it's just an escape hatch.