Recently, i have been tapping into nextJS by Vercel and damn i love how this works flawlessly. Saying that, it does still come with issues that makes you scratch your head. To be honest, i am from a PHP workflow and working with PHP debugging issue is not so hard because the debug messages are straight forward.
I have grown quite familiar with these kinds of messages now and kind of have developed a gist to where to look for if an absolutely bizarre error message occurs which does not make sense at all.
Vercel gives you power to host your nextJS app with automation tool using Github. Meaning that simply pushing your code to some branch would allow your site to be compiled in production site – that’s when an error such as ModuleNotFoundError: Module not found: Error: Can’t resolve ‘../your/path/somewhere’
The most confusing thing here is that this was working on my local version just fine and when i do a “next build” on local – its working perfectly but why it does not work here ?
Well in my case this was simply because of directory issue on Github.
At some point, i had renamed all components to capital as it should be and forgot to do a Github move. So, in Github my previous files were name in previous name while on my local it was set to capital. So, when i imported the component to my file, it was working on my local copy because of the file name.
So in Github file name as for example: app/components/footer.js
in my local copy it was: app/components/Footer.js
I had imported the component with @/components/Footer
Fixing the name on Github fixed this for me. So how do we fix this issue ? Run below code on your terminal.
git mv OldFile.js oldfile.js
This should pretty much solve the can’t resolve issue when building on Vercel for you.