v3.0 deployed on Vercel: There was an error initializing Payload #6700
-
Link to reproductionPayload Version3.0.0-beta.39 Node Version
Next.js Version14.3.0-canary.28 Describe the BugI'm using the API to easily fetch data. It works like a charm locally. I pushed my website to a Github branch which Vercel then deploys for previewing purposes (I haven't merged into the main branch yet). When I preview my deployed branch using Vercel's preview link, I'm encountering the following issues: 1. I can't access Payload's admin:I tried accessing the Payload's admin and I get a 500 error header: 2. I can't fetch dataI can't get to display my projects from projects.tsx // ...
useEffect(() => {
const fetchProjects = async () => {
try {
const response = await fetch("/api/Projects");
const data = await response.json();
console.log("Data received for projects:", data); // On Vercel this returns: "There was an error initializing Payload"
setProjects(data.docs);
setError(null);
} catch (error) {
console.log("We got this error: ", error);
setError("Failed to fetch projects.");
setProjects([]);
}
};
fetchProjects();
}, []);
// ...Based on what I've read from @jmikrut on this issue: "Vercel is instead a serverless host, which is set up to run serverless functions", Payload couldn't be initialized. Today, Payload v3 supports serverless functions as mentioned on this blog post by the Payload team: "Regardless, as of this moment, it's all serverless, so you can deploy to Vercel, and it's just going to work right out of the box." so I assume this should work fine, which is not my case. This is what I'm getting from Vercel's Deployment Details logs: TL;DR What I can see on these logs is that these What's confusing to me, and to my knowledge's extent is somewhat a discrepancy due to my humble ignorance, is that when I scroll to the Functions tab within Deployment Details, I see that these were created? 
_(Help wanted trying to understand why the logs show 0 bytes while these Functions tab above shows data)_
Please let me know if I am overlooking something. Reproduction Steps
Adapters and PluginspostgresAdapter (using Supabase) and s3Storage |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 2 replies
-
|
Are you able to access the admin UI on vercel? Using the url you provided, I'm not able to get the admin to load at all: https://wilbert-caba-portfolio-git-featur-c0d2e2-wilbert-cabas-projects.vercel.app/admin which tells me you have other issues. Aside from that, you should be able to use a server component and avoid using Please verify that everything else is working besides your client component issue. |
Beta Was this translation helpful? Give feedback.
-
|
@DanRibbens I ended up setting a Postgres database using Supabase and fetching data on a server component instead of using fetch on the client as per your suggestion. That seemed to do the work, so I truly appreciate your recommendation. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @wilbertcaba — to build on what Dan said, you should be seeing some errors in your logs on Vercel. Payload does indeed work on Vercel with 3.0, but when I load your website, I see that it produces a 500 error on the client side. Hunt down that error and try to determine what is going on. Is it your database connection string? Also, the first load JS being zero bytes is expected, because those are API route handlers, and by their nature, API routes do not download any first load JS. I will convert this to a discussion but we can continue to try and help here! |
Beta Was this translation helpful? Give feedback.
-
|
@jmikrut got it, now it's clear to me. Thanks a lot for your support, man. Keep up the good work... love where things are going with Payload v3. |
Beta Was this translation helpful? Give feedback.
-
|
Refer to answer above |
Beta Was this translation helpful? Give feedback.
Are you able to access the admin UI on vercel? Using the url you provided, I'm not able to get the admin to load at all: https://wilbert-caba-portfolio-git-featur-c0d2e2-wilbert-cabas-projects.vercel.app/admin which tells me you have other issues.
Aside from that, you should be able to use a server component and avoid using
fetch. In a client component, using fetch should be fine but you need to add'Content-Type': 'application/json'headers to your fetch request.Please verify that everything else is working besides your client component issue.