I encountered an error in my frontend code today. I thought this was worthy of sharing.

I was building a simple weekend project in Nuxt.js connected to Strapi CMS. I deployed Strapi CMS on Heroku. The Nuxt frontend code is on Vercel. The setup was working, and the project runs well both in development and production. The Nuxt project works perfectly fine on my local machine. I can build the project with yarn build and run smoothly with yarn start.

Here's a weird part, after adding some dependencies to my code, whenever I pushed a new commit to Github, Vercel couldn't deploy the project. For some reason, the code works well on my machine but fails to build on Vercel. I checked the project's function logs, and sure enough, an error exists.

Here's the output log:

Vue packages version mismatch:
vue@2.3.3
vue-server-renderer@2.6.14
This may cause things to work incorrectly. Make sure to use the same version for both.
....

I stumbled upon this error before and, I knew removing the node_modules folder and package.json will fix the issue - it didn't help either.

I tried to fix the issue by removing some packages I added to the project. I thought it causes the problem. The project works again in development mode, so I pushed the code on Github and wait for Vercel to pick up the commit and finish building the project. And yet again, the issue persists. I tried reinstalling Nuxt but to no avail.

After almost a day of research and trying to fix the issue, I finally came across this closed issue on the Nuxt.js official repository.

https://github.com/nuxt/nuxt.js/issues/6823

I followed some of the replies on the thread and, one of the comments helped me solve the issue.

Here's how I got it to work

Delete node_modules folder
Delete package-lock.json or, in my case yarn.lock since I'm using yarn
And finally, run the following commands while in the project directory. I used npm this time instead of yarn.

npm cache clean --force
npm i
npm audit fix
npm update

Running the commands fixed the issue for me. The project now builds on Vercel successfully.

Happy Coding

# vercel

Fix Vue package mismatch error