First time deploying to Vercel. It has a similar flow and feel as deploying to Netlify.

The deployment was a cinch. Sort of. I hit an error on deployment due to “module not found.” Relatively simple fix (more info below). In production the app wasn’t working because the connection to the database was failing. This misconfiguration of the connection string and environment variables was a frustrating fall down a deep troubleshooting rabbit hole (also more info below).

This was a case in which I tried so many tweaks as potential solutions, I’m not 100% sure what it actually was that fixed the issue, but I’m just so relieved the pain is over.

As usual, the solution was relatively simple, and something that should have taken much quicker to fix.

Thinking of previous similar situations, I tried just settling down and going step by step. I knew this was the database connection. Ultimately, I found an example project that I was able to implement as a test. Knowing the connection on the example project test was working, I knew the connection was possible and it was just my code that was the issue. From there I just had to try different things in my implementation until it worked.

Post-mortem the fix always seems so simple. There’s really two takeaways here: the first is the actual technology issue resolution of the connection string. The other takeaway is the next time I run into an issue like this how can I minimize the pain.

The first takeaway

Error handling is important because you can tell at what point the code is failing. In my case I wasn’t sure if Vercel was throwing an error, the db connection was throwing the error or the actual fetching was throwing the error. If I had a wrapped the database connection in better error handling logic I could have seen my own custom error message and known that was the thing.

It was weird about this issue is local development was working and even running the build and previewing that built I didn’t have the issues. I know for a fact this development environment versus production environment will be a thing in the future.

It wasn’t clear that you had to even set up your environment variables in Vercel. I need this was the case but I was seeing documentation that it wasn’t even needed.

The example tutorial used like an outdated approach for handling environment variables. The other thing was the MongoDB NextJS example project was also outdated. That’s really pulling my hair out on some frustrations that this technology moves quickly and so things can become outdated making problems more prevalent and their solutions more difficult to resolve.

There is this option in Vercel called like push to production. Had been really understand this because isn’t deployment production so the fact that there was an option to advance it to production seemed silly.

Every time you push the code you need to make a commit so I have all these wacky commits that I need to unwind although the true solution is in there somewhere. Now I need to do like a branch and a rebasing some get work to get my project back to the state I want it.

The ultimate solution was just storing the connection string in the env.local file without quotes and storing this in a variable and then referencing this variable instead of putting directly into mongoclient.connect

I was also getting a typescript error on process.env.connection_string which I was able to resolve using the exclamation point but I’m not sure if that! Was also a causing the connection string to not pull in correctly.

In final resolution I actually converted the file back to a JavaScript file.

Reading the section it’s pretty obvious that although my code currently works I still have a lot of work to do in figuring out what the solution was and undoing some of the trial and error changes made.

The deployment is failing and I think it’s cuz I renamed a module and it’s like stuck in the cash and this is happened before I had to fix it by restarting vs code but redeploying didn’t work so I actually had to like remove the feature and delete the files.

The second takeaway

This fall down a deep troubleshooting rabbit hole has happened to me before.

You want to get it done. You can’t get it done You know you need a break but you just want to power through because you know you can’t fully take a break knowing you’re this close and can’t get it done.

I guess first step here would just be to recognize that You have found yourself in the situation yet again. Stay calm, don’t stress. This can be difficult cuz we run into issues all the time and then we fix them and move on. You find yourself in these deeper situations when you go through a handful of sticks and none of them work. By then you’re so invested both mentally and time-wise it’s understandable that you just want to get it done.

I would say go back to first principles and proceed step by step.

I Could have added error handling for the database connection with a custom response message so I knew whether it was my fault or not. Chances are it’s always your fault but still. Confirming what you think is the error is a good idea. In this case I had never got confirmation before the solution was implemented.

Finding the example project was the best idea but this came pretty late in my solutions. Knowing that this other implementation could connect to the database told me that it was possible to connect in this deployment environment and I just needed to make some changes to my code.