Trouble deploying to Vercel

[harry-kim]

Hello,

I'm trying to deploy my app on Vercel, however it results in a 404 when I try to access it.
Copying the example's tsconfig with moduleResolution and module set to NodeNext seems to break my imports.
Specifically I'm trying to import from zora's sdk:

import {
  zoraCreator1155ImplABI,
  zoraCreatorFixedPriceSaleStrategyABI,
} from "@zoralabs/protocol-deployments";

the tsconfig.json that works for me locally

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "skipLibCheck": true,
    "esModuleInterop": true,

    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "jsxImportSource": "frog/jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "types": ["frog/client"]
  },
  "include": ["**/*.ts", "**/*.tsx", "**/*.mtsx"]
}

Forgive me if it's a stupid question as I'm new to typescript programming.

PS. Your discord invite link on the website is expired

[dalechyn]

You most likely need to specify jsxImportSource not in the tsconfig and let it be react there (as before).

You need to add it at the top of your Route Handler /** @jsxImportSource frog/jsx */. See here for an example.

Regarding 404 – make sure the route.tsx is located at /**/[[...routes]]/route.tsx. The catch-all group is very important ([[...routes]]).

[harry-kim]

Thanks for your reply

my old directory structure was src/index.tsx but I've moved and renamed it to be src/[[...routes]]/route.tsx

in that file I have

/** @jsxImportSource frog/jsx */

import {, Frog } from "frog";
import { handle } from "frog/vercel";
import { devtools } from "frog/dev";
import { serveStatic } from "frog/serve-static";

export const app = new Frog({
  assetsPath: '/',
  basePath: '/src',
  browserLocation: '/:path',
  title: "Add cast action",
});

app.frame("/", (c) => {
  ...my frame code
});

const isProduction = import.meta.env?.MODE !== 'development'
devtools(app, isProduction ? { assetsPath: '/.frog' } : { serveStatic })

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

However I'm still getting a 404 from my url on http://vercellink/src/ and also locally now as well.

Here is my tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "skipLibCheck": true,
    "esModuleInterop": true,

    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "jsxImportSource": "react",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
  },
  "include": ["**/*.ts", "**/*.tsx", "**/*.mtsx"]
}

and package.json

{
  "name": "farcastle-lore-nft",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "frog vercel-build",
    "dev": "frog dev",
    "deploy": "vercel"
  },
  "dependencies": {
    "@neynar/nodejs-sdk": "^1.42.0",
    "@vercel/kv": "^1.0.1",
    "@zoralabs/protocol-sdk": "^0.11.1",
    "dotenv": "^16.4.5",
    "frog": "latest",
    "hono": "latest",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "vercel": "^37.6.0",
    "viem": "^2.17.11"
  },
  "devDependencies": {
    "@types/node": "^22.7.4",
    "@types/react": "^18.3.10",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "typescript": "^5.6.2",
    "vercel": "latest"
  }
}

Thanks again!