Error occured prerendering page "/api/apiRoute".
Answered
Peruvian anchoveta posted this in #help-forum
Peruvian anchovetaOP
I have a a client component with a useEffect lifecycle hook that calls this endpoint and inside of that endpoint I just have a GET fuction that finds all from a table using sequelize and returns the object. I have all the env variables set properly, I have used digitalocean to host the application and used a managed database. Everything is set properly and I can access the database via a client and my local machine. I can build the app locally without issues but when building on digitialocean I get this error of error occured prerendering. Anyone knows why? or what am I missing?
77 Replies
Canyou send screenshot?
Peruvian anchovetaOP
can you try to connect to the managed database via the server?
directly
Peruvian anchovetaOP
I have also done a try catch on my db call and it says it timed out before the prerender.
@Anay-208 directly
Peruvian anchovetaOP
like on the digitalocean console?
@Peruvian anchoveta like on the digitalocean console?
No, connect to droplet and try to access from there
Peruvian anchovetaOP
you mean the manage database via the digitialocean portal? or locally with like dbeaver or my own repo?
the nextjs application is deployed via the app platform
I can run my migrations fine either locally connecting to the Managed Database or via the app platforms console. So all the permissions and env variables are good. its the build phase thats weird...
If I just take out the part where its doing the "db.${ModelName}.findAll()" and just return an object. It works and builds fine... so not sure why it does this? Im assuming putting the fetch inside the useEffect might have something to do with it? but not sure why it would?locally it has no issues.
@Peruvian anchoveta you mean the manage database via the digitialocean portal? or locally with like dbeaver or my own repo?
Ssh into the droplet, and try to connect to managed database
oh its deployed via app platform
um
are you able to connect locally to the db
Peruvian anchovetaOP
yup
both via the env variables on my project and on a client
I can run migrations both locally and inside the console the app platform gives you
but if I try to build on the console the app platform gives I get the error of waiting on pid 105 and failed: EOF
The line wher you look for db, add a try catch block, and console.log the env vars and confirm if they are right
Peruvian anchovetaOP
so it has to be built via their method...
@Anay-208 The line wher you look for db, add a try catch block, and console.log the env vars and confirm if they are right
Peruvian anchovetaOP
already done that. the env variables are correct
Add a try catch block a return a 500 error for now, and check if the build succeds
Peruvian anchovetaOP
@Peruvian anchoveta Click to see attachment
in catch block, return 500 error
+ the env variable. Log it in catch block only
Peruvian anchovetaOP
ah makes sense yes lol. Ill add it to the catch block. Ill try just adding a nextresponse with status 500 then
the client component shouldnt be the issue Im assuming and hoping, its all pretty basic stuff... so lets see if its just the catch block? but why would it fail on build at DO and not locally xD
BRUH.... why did that build correctly now?
@Peruvian anchoveta BRUH.... why did that build correctly now?
because a response was returned
Peruvian anchovetaOP
whats the diff between local and DO build
I'm not sure how digitalocean handle builds
can you check if the api route is working fine
Peruvian anchovetaOP
it errors out on a "dot map" I did over the data but I should have it handled? I have a if statement to check if the data was loaded or not
You should get condition for possibility like when data failed to load
There must be a error on the client side
But check if on the server side, did correct env console.log in logs
Peruvian anchovetaOP
it is a client side exceptiion
the left side is the deployed site and the right side is the local one
check the console whether correct env was printed
Peruvian anchovetaOP
it is connecting I know that now that it builds or it should but locally it doesnt throw the 500? its because I have no data on the database and Im trying to see what it returns instead?
ahhh, at first I was checking the length but now it returns an empty object?
so it nevers get caught and tries to render the page
Peruvian anchovetaOP
Im gonna change how I handle it because right now Im just setting the results no matter what comes back
gonna await the data and check what comes back first before I set it
that should work?
yup
Peruvian anchovetaOP
I still find it kinda frustrating that it was the lack of a response on the catch block that threw my whole build off lmao
when locally it wasnt crying about it
Give me updates about the issue
Peruvian anchovetaOP
yeah, Im seeing that maybe I should do the change on the api side of things and if it doesnt return data from the server I should just send back and empty []. so It works with the length check I already got?
that seems better
ima try
and also, about the issue of db fetch, it might be a issue on DO's side only
Answer
Peruvian anchovetaOP
hmmm interesting. So it was trying to connect when building because of the client fetch call inside the useEffect? but since I wasnt handling the catch error properly it also failed horribly? most likely?
Okay I fixed it. Everything is gucci now both on prod and dev
omg that was so annoying xD
THANK YOU, for being here so fast and helping out man
you are a god send xD
now I gotta test it and see if anything breaks during the process of adding and fetching data that has been entered. but this is the big hurdle. The other things that might pop up should be simpler things to look at? knocks on wood
@Anay-208 And check this also: https://docs.digitalocean.com/support/why-does-my-app-fail-to-build-while-trying-to-connect-to-a-digitalocean-managed-database/#:~:text=App%20Platform%20does%20not%20support,the%20app%20has%20been%20built.
Can you mark this answer as a solution(by right clicking>apps>mark solution)
@Peruvian anchoveta hmmm interesting. So it was trying to connect when building because of the client fetch call inside the useEffect? but since I wasnt handling the catch error properly it also failed horribly? most likely?
I just had a question. Can you deploy next.js on digitalocean app platform with free plan?
Peruvian anchovetaOP
I pay 5 bucks a month for the app platform to host nextjs
honestly it seems way better than the vercel option
got it. Just wanted to confirm
Peruvian anchovetaOP
you can deploy static sites for free tho. Only 3. So like Angular
I host on cloudflare pages now, as its much cheaper
Peruvian anchovetaOP
I see, Ive used DO for a while now and I find it to be and overall well rounded place.
this is my first app platform project tho
@Anay-208 I just had a question. Can you deploy next.js on digitalocean app platform with free plan?
Peruvian anchovetaOP
honestly Im not quite sure... you might if its a static site? they offer 3 free static sites on their basic plan
Ya ik #off-topic