TypeError: Cannot destructure property 'castId' of 'frameData' as it is undefined.

[megabyte0x]

I have initialised a vercel frame using yarn as defined in the docs, and create a sample frame for fruit selection from the docs.

But when I try to use the frameData, it returns TypeError

Can you help me out with this?

Error:

TypeError: Cannot destructure property 'fid' of 'frameData' as it is undefined.
    at eval (/Users/megabyte0x/Documents/CODE/AARC/aarc-frame/api/index.tsx:18:11)
    at file:///Users/megabyte0x/Documents/CODE/AARC/aarc-frame/node_modules/frog/_lib/frog-base.js:199:159
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async dispatch (file:///Users/megabyte0x/Documents/CODE/AARC/aarc-frame/node_modules/hono/dist/compose.js:29:17)
    at async file:///Users/megabyte0x/Documents/CODE/AARC/aarc-frame/node_modules/hono/dist/hono-base.js:226:25
    at async getRequestListener.errorHandler.err (file:///Users/megabyte0x/Documents/CODE/AARC/aarc-frame/node_modules/@hono/vite-dev-server/dist/dev-server.js:67:32)
    at async responseViaResponseObject (file:///Users/megabyte0x/Documents/CODE/AARC/aarc-frame/node_modules/@hono/node-server/dist/index.mjs:300:15)
TypeError: Failed to parse URL from 
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getImageSize (file:///Users/megabyte0x/Documents/CODE/AARC/aarc-frame/node_modules/frog/_lib/dev/utils/getImageSize.js:7:22)
    at async Promise.all (index 1)
    at async get (file:///Users/megabyte0x/Documents/CODE/AARC/aarc-frame/node_modules/frog/_lib/dev/routes.js:77:39)
    at async file:///Users/megabyte0x/Documents/CODE/AARC/aarc-frame/node_modules/frog/_lib/dev/routes.js:38:23
    at async dispatch (file:///Users/megabyte0x/Documents/CODE/AARC/aarc-frame/node_modules/hono/dist/compose.js:29:17)
    at async dispatch (file:///Users/megabyte0x/Documents/CODE/AARC/aarc-frame/node_modules/hono/dist/compose.js:29:17)
    at async file:///Users/megabyte0x/Documents/CODE/AARC/aarc-frame/node_modules/hono/dist/hono-base.js:226:25
    at async getRequestListener.errorHandler.err (file:///Users/megabyte0x/Documents/CODE/AARC/aarc-frame/node_modules/@hono/vite-dev-server/dist/dev-server.js:67:32) {
  [cause]: TypeError [ERR_INVALID_URL]: Invalid URL
      at new NodeError (node:internal/errors:405:5)
      at new URL (node:internal/url:611:13)
      at new Request (node:internal/deps/undici/undici:7132:25)
      at fetch2 (node:internal/deps/undici/undici:10715:25)
      at Object.fetch (node:internal/deps/undici/undici:11574:18)
      at fetch (node:internal/process/pre_execution:229:25)
      at global.fetch (file:///Users/megabyte0x/Documents/CODE/AARC/aarc-frame/node_modules/@hono/node-server/dist/index.mjs:261:10)
      at getImageSize (file:///Users/megabyte0x/Documents/CODE/AARC/aarc-frame/node_modules/frog/_lib/dev/utils/getImageSize.js:7:28)
      at get (file:///Users/megabyte0x/Documents/CODE/AARC/aarc-frame/node_modules/frog/_lib/dev/routes.js:79:13)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    input: '',
    code: 'ERR_INVALID_URL'
  }
}

Basic Frame code:

import { Button, Frog, TextInput } from 'frog'
import { handle } from 'frog/vercel'

export const app = new Frog({
  assetsPath: '/',
  basePath: '/api',


app.frame('/', (c) => {
  const {frameData} = c;
  const {fid} = frameData;
  console.log(fid);
  return c.res({
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        Select your fruit!
      </div>
    ),
    intents: [
      <Button value="apple">Apple</Button>,
      <Button value="banana">Banana</Button>,
      <Button value="mango">Mango</Button>
    ]
  })
})


export const GET = handle(app)
export const POST = handle(app)

EDIT:
I was able to make it work like this:

const {fid} = frameData? frameData : {fid: 0};

[megabyte0x]

Got the answer here:

https://warpcast.com/kriptonio/0x42fe2e70