I've been getting this ModuleNotFoundError whenever I try to deploy my website to vercel. I have renamed my components and CSS modules but for some reason, I keep getting this error.
Does anyone know how to solve this issue, because I have no idea what I'm getting wrong?
Screenshot of error log
If you has been changed the name of folder or file to lowercase or uppercase, for example: from /Components to /components
The problem shold be because you remote branch didn't update, and in local brach the name already is correct, your solution run, but the vercel use linux, that is casesensitive, so, the ModuleNotFoundError occurred.
To solve the problem, you can save your folder/file at other place, and then deleted it from project and commit it. After commit you should copy and past the file/folder saved in another place in your project again and commit to push to romete branch with correctly structure. You also can use the command "git mv "oldfileOrFolder" "newFileOrFolder", see the documentation.
Did you push a commit where you only renamed files? If you're using a case insensitive filesystem (usually macOS) and remotely it’s a case sensitive filesystem (Linux-based build environment) - this could be causing issues. You could confirm by renaming the file to something different (so casing wouldn't be an issue).
To confirm, running next build && next start works locally?
The problem was with the "styles" folder, for some reason vercel couldn't locate the paths to my css files. I solved this problem by moving all my css files (except global.css) to my "Components" folder (not the best option though, but it worked). Then I created a "jsConfig.json" file with this code. { "compilerOptions": { "baseUrl": ".", "paths": { "@/components/": ["components/"] } } }
Finally, this was how I began to import my CSS files import styles from "@/components/.module.css";
I had a similar issue with Vercel and I tried all of the following:
This problem is not always due to name of a file or folder which name was changed by changing its case only. Renaming the file and the folder would have worked in that case.
What has worked for me finally was that I imported the offending file with relative path rather than with a path relative to project folder that starts with "src". To be exact my original import looked like this:
import { DatabaseConnection as db} from 'src/atlas/database.connection';
And the import that worked with Vercel was:
import { DatabaseConnection as db} from '../../../atlas/database.connection';
Hope this post saves you time and help avoid some frustration.
I had the same problem, I managed to fix the deployment after I put the components/ folder in the app/ folder, which was previously located next to the app/ folder in the src/ folder.
before:
src/
app/
components/
after:
app/
components/
I don't know why but it helped!
PS: src/ folder looked as unnecessary now so I removed it
