Build Error —— 500: Internal Server Error

[outdatedx]

Bug Report

I'm using vercel for my builds but then I get a 500: Internal Error I went back and check the references I had I saw I was using getStaticProps: GetStaticProps instead of getServerSideProps: GetServerSideProps but it still gave me a error so I went back to get static props.

[GET] /
23:11:01:12
2022-04-08T17:41:01.490Z	e6df46f7-a343-4288-b57f-bd78f18e6559	ERROR	FetchError: invalid json response body at https://xoutdated.vercel.app/api/projects?limit=10000 reason: Unexpected token < in JSON at position 0
    at /var/task/node_modules/node-fetch/lib/index.js:272:32
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async getServerSideProps (/var/task/.next/server/pages/index.js:197:25)
    at async Object.renderToHTML (/var/task/node_modules/next/dist/server/render.js:504:20)
    at async doRender (/var/task/node_modules/next/dist/server/next-server.js:1428:38)
    at async /var/task/node_modules/next/dist/server/next-server.js:1523:28
    at async /var/task/node_modules/next/dist/server/response-cache.js:63:36 {
  type: 'invalid-json',
  page: '/'
}
RequestId: e6df46f7-a343-4288-b57f-bd78f18e6559 Error: Runtime exited with error: exit status 1
Runtime.ExitError

This is the build logs

Expected Behavior

It should work as it did locally

Current Behavior

It gives me a 500: Internal Error.

I made my repo public for a lil while was wondering if anyone and send a pull request to help me.

[wbjohn]

I think Next.js is trying to invoke a serverless function at pages/api/projects, which does not exist. I'm not sure why it would work locally. It probably would be better to use the Payload Local API inside of getStaticProps or getServerSideProps.

[outdatedx]

I think Next.js is trying to invoke a serverless function at pages/api/projects, which does not exist. I'm not sure why it would work locally. It probably would be better to use the Payload Local API inside of getStaticProps or getServerSideProps.

@wbjohn

Oh shit I read through this again you said Payload Local API, right I can use that but then I dont really know on how to cause although the docs mention it I still dont know how would I use it in real world situation.

[outdatedx]

@wbjohn after you forked my project it deployed and gave me this error

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
08:43:57	TypeError: Cannot read property 'collections' of undefined
08:43:57	    at Payload.find (/vercel/path0/node_modules/payload/dist/collections/operations/local/find.js:7:28)
08:43:57	    at Payload.find (/vercel/path0/node_modules/payload/dist/index.js:63:20)
08:43:57	    at getStaticProps (/vercel/path0/.next/server/pages/index.js:200:58)
08:43:57	    at renderToHTML (/vercel/path0/node_modules/next/dist/server/render.js:387:26)
08:43:57	    at async /vercel/path0/node_modules/next/dist/export/worker.js:273:36
08:43:57	    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:74:20)
08:43:57	info  - Generating static pages (2/2)
08:43:57	(node:642) UnhandledPromiseRejectionWarning: Error: Export encountered errors on following paths:
08:43:57		/
08:43:57	    at /vercel/path0/node_modules/next/export/index.ts:703:13
08:43:57	    at runMicrotasks (<anonymous>)
08:43:57	    at processTicksAndRejections (internal/process/task_queues.js:95:5)
08:43:57	    at Span.traceAsyncFn (/vercel/path0/node_modules/next/trace/trace.ts:96:14)
08:43:57	    at /vercel/path0/node_modules/next/build/index.ts:1540:9
08:43:57	    at Span.traceAsyncFn (/vercel/path0/node_modules/next/trace/trace.ts:96:14)
08:43:57	    at /vercel/path0/node_modules/next/build/index.ts:1414:7
08:43:57	    at Span.traceAsyncFn (/vercel/path0/node_modules/next/trace/trace.ts:96:14)
08:43:57	    at build (/vercel/path0/node_modules/next/build/index.ts:141:23)
08:43:57	(Use `node --trace-warnings ...` to show where the warning was created)
08:43:57	(node:642) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 6)

[jmikrut]

Hey @outdatedx —

I think I know what's going on for you. It's a combination of a few different things.

Firstly, Vercel is not a typical Node host. It doesn't even run your serve command at all, which means that Payload is never actually initialized. Vercel is instead a serverless host, which is set up to run serverless functions (at this time, Payload does not export serverless functions for you - however this is likely to change in the near future).

You can deploy Express apps on Vercel, but they recommend against it:

https://vercel.com/guides/using-express-with-vercel

Basically, a TL;DR from the above link is that even if you set up your project properly as an Express app able to be deployed on Vercel, you are basically deploying your entire Express app, all routes, and everything, as one giant serverless function. To contrast, when you deploy a NextJS site on Vercel, it actually splits out every one of your server-rendered pages into their own serverless function.

The error you are seeing is because your dist/index.js file is never executed, thus Payload is not initialized, and when you try and run payload.find, you'll see that error message.

You should consider deploying to something like Heroku or DigitalOcean Apps instead. On those services, you'll have a true Express server that runs all the time and is only initialized once, rather than each time a function is invoked.

But, if you do decide you want to continue to deploy to Vercel, the above link shows you a few steps that you need to complete yet:

1. Export your Express app at /api/index.js
2. Add a rewrite to send all traffic to your /api/index.js file

This is all found on the above link here.

I'm going to go ahead and move this thread to a Discussion as it's actually not an issue with Payload per se - rather, it's a configuration and infrastructure issue. The good news is that you can deploy to Vercel if you want to, but in reality you're probably better off with a traditional cloud server platform rather than a serverless platform like Vercel.

Does this clear things up for you?

[outdatedx]

You think you could help me re write it cause I'm way to used to vercel at this point

[outdatedx]

would really appreciate it still looking for answers

[arthur-es]

This project would gain lots of public if we could deploy easily to Vercel.

A way to run all back-end code in their serverless functions.