Tiger 🐅•8mo ago

Using Convex with Vercel | Convex Develo...

i tried following this, deploying to vercel https://docs.convex.dev/production/hosting/vercel i had a deployment already, but changed build + env vars now i get a server errors strangely

Using Convex with Vercel | Convex Developer Hub

Host your frontend on Vercel and your backend on Convex.

29 Replies

Tiger 🐅OP•8mo ago

seems like ENV is undefined maybe prod env vars missing

lee•8mo ago

what errors are you getting?

Tiger 🐅OP•8mo ago

ENV is undefined

TypeError: Cannot destructure property 'ENV' of 'useLoaderData(...)' as it is undefined.
    at Layout (file:///var/task/build/server/nodejs-eyJydW50aW1lIjoibm9kZWpzIn0/index.js:268:11)
    at renderWithHooks (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:3790:18)
    at renderElement (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:3931:15)
    at retryNode (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:4428:16)
    at renderNodeDestructive (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:4247:7)
    at renderElement (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:4182:11)
    at retryNode (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:4428:16)
    at renderNodeDestructive (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:4247:7)
    at renderElement (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:4182:11)
    at retryNode (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:4428:16)

TypeError: Cannot destructure property 'ENV' of 'useLoaderData(...)' as it is undefined.
    at Layout (file:///var/task/build/server/nodejs-eyJydW50aW1lIjoibm9kZWpzIn0/index.js:268:11)
    at renderWithHooks (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:3790:18)
    at renderElement (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:3931:15)
    at retryNode (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:4428:16)
    at renderNodeDestructive (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:4247:7)
    at renderElement (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:4182:11)
    at retryNode (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:4428:16)
    at renderNodeDestructive (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:4247:7)
    at renderElement (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:4182:11)
    at retryNode (/var/task/node_modules/.pnpm/react-dom@19.0.0-rc-512b09b2-20240718_react@19.0.0-rc-512b09b2-20240718/node_modules/react-dom/cjs/react-dom-server.node.production.js:4428:16)

Error: ConvexReactClient requires a URL like 'https://happy-otter-123.convex.cloud'. but its weird, i added it to the env vars followed the docs but it wasn't a new deployment tho an existing one where i configured the env vars and override the build command npx convex deploy --cmd-url-env-var-name CUSTOM_CONVEX_URL --cmd 'npm run build' i tried this too which did go through successfully redeplyoing and looking at the logs goshhh i just wanna set it up so i can code man 😭

Tiger 🐅OP•8mo ago

Tiger 🐅OP•8mo ago

deleted my project new vercel project deploying again

Tiger 🐅OP•8mo ago

congrats confetti with unexpected server error cmon

Tiger 🐅OP•8mo ago

@MapleLeaf 🍁 do you've any idea of issues u ran into urself when deploying to vercel?

Tiger 🐅OP•8mo ago

i followed this but no luck https://docs.convex.dev/production/hosting/vercel

Using Convex with Vercel | Convex Developer Hub

Host your frontend on Vercel and your backend on Convex.

MapleLeaf 🍁•8mo ago

that looks like more of a remix issue than a vercel issue in fact can you show your code that the error is pointing at? the useLoaderData() call

Tiger 🐅OP•8mo ago

but env should be there, i did set the env var

export async function loader() {
  const CONVEX_URL = process.env['CONVEX_URL']!
  return json({ ENV: { CONVEX_URL } })
}

export function Layout({ children }: { children: React.ReactNode }) {
  const { ENV } = useLoaderData<typeof loader>()
  const [convex] = useState(() => new ConvexReactClient(ENV.CONVEX_URL))
...

export async function loader() {
  const CONVEX_URL = process.env['CONVEX_URL']!
  return json({ ENV: { CONVEX_URL } })
}

export function Layout({ children }: { children: React.ReactNode }) {
  const { ENV } = useLoaderData<typeof loader>()
  const [convex] = useState(() => new ConvexReactClient(ENV.CONVEX_URL))
...

i followed the remix docs for convex im wondering of convex auth needs its own "auth" thing deployed too

MapleLeaf 🍁•8mo ago

whys it accessed via brackets like that? well, either way, if you're using remix vite, you don't need to use a loader to pass the variable

Tiger 🐅OP•8mo ago

import meta should work? ahh

MapleLeaf 🍁•8mo ago

const [convex] = useState(() => new ConvexReactClient(import.meta.VITE_CONVEX_URL))

const [convex] = useState(() => new ConvexReactClient(import.meta.VITE_CONVEX_URL))

yeah has to start with VITE_ but yeah

Tiger 🐅OP•8mo ago

CONVEX_DEPLOYMENT too gotta start with vite?

MapleLeaf 🍁•8mo ago

that one i don't think needs to be set in vercel at all that's just for the CLI afaik

Tiger 🐅OP•8mo ago

but in vercel its gotta be "vite" too

MapleLeaf 🍁•8mo ago

yeah

Tiger 🐅OP•8mo ago

bc i have CONVEX_DEPLOY_KEY there thats the one im talking about

MapleLeaf 🍁•8mo ago

oh, not that one

Tiger 🐅OP•8mo ago

its confusing bc afaik that one should infer the convex url for me but the vite convex url i gotta set myself itseems like

MapleLeaf 🍁•8mo ago

that should get set by the build step if the default one isn't right, you need to pass --env-var-name or something like that

Tiger 🐅OP•8mo ago

gotcha

Tiger 🐅OP•8mo ago

lets see if its setting the right one now :Spooked: no........ :AnimeTiredS: Error: ConvexReactClient requires a URL like 'https://happy-otter-123.convex.cloud'. the command "npx convex deploy --cmd-url-env-var-name https://terrific-toucan-239.convex.cloud --cmd 'npm run build'" but how can i tell it it should be VITE_CONVEX_URL ... did it manually ok it works now npx conved deploy u gonna make me rip my hair out :spookySPOOKY: also im much more comfortable with this approach let me set the env vars im suppose. to set and then let it all just "work" as a backend no need to set the env var for me yeah i should've just followed my instincts from the get go

MapleLeaf 🍁•8mo ago

lol nice

Tiger 🐅OP•8mo ago

im using the same JWKS and JWT_PRIVATE_KEY as dev i dont think it should be an issue its just for convenience @Wayne @Michal Srb let me know if its an issue using the same auth env vars as dev specifically JWT_PRIVATE_KEY and JWKS i know google id and secret should be diff as for SITE_URL it should be the deployed URL on vercel (just asking as confirmation) ok seems like my instincts were ok yeah it all works now i got it deployed to prod which is nice that's all setup google oauth apple oauth and then email/password ...i guess this entire experience is a feedback for you TLDR: - tell me what environment variables i should add to vercel - let me deploy normally, no need to override build command and let u handle env vars, its super simple, no need for magic as for convex prod project, u kind of documented it there already even tho i was confused but yeah, that i need to add the environment variables over at the convex production project too

Michal Srb•8mo ago

let me deploy normally, no need to override build command

This is set up for preview deployments, where you don't know beforehand what the URL of your backend is. (Convex Auth doesn't support preview deployments yet though, as it will need to proxy for OAuth).

Michal Srb•8mo ago

that i need to add the environment variables over at the convex production project too

https://labs.convex.dev/auth/production Is there something missing from this page?

Production - Convex Auth

Authentication library for your Convex backend

Tiger 🐅OP•8mo ago

i missed this one!

Using Convex with Vercel | Convex Develo...

Did you find this page helpful?