Search code examples
next.jsvercel

Problem with CSS module not found when deploying to vercel

This is the error log. And I cannot for the life of me fix this. everything works fine in dev but on deployment it fails. :(

23:12:53.687    Failed to compile.
23:12:53.687    ModuleNotFoundError: Module not found: Error: Can't resolve '../../styles/Homebody.module.css' in '/vercel/workpath0/components/Home'
23:12:53.687    > Build error occurred
23:12:53.688    Error: > Build failed because of webpack errors
23:12:53.688        at /vercel/workpath0/node_modules/next/dist/build/index.js:15:918
23:12:53.689        at runMicrotasks (<anonymous>)
23:12:53.689        at processTicksAndRejections (internal/process/task_queues.js:93:5)
23:12:53.689        at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:3:470
23:12:53.704    npm ERR! code ELIFECYCLE
23:12:53.704    npm ERR! errno 1
23:12:53.707    npm ERR! [email protected] build: `next build && next export`
23:12:53.707    npm ERR! Exit status 1
23:12:53.707    npm ERR! 
23:12:53.707    npm ERR! Failed at the [email protected] build script.
23:12:53.707    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
23:12:53.714    npm ERR! A complete log of this run can be found in:
23:12:53.714    npm ERR!     /vercel/.npm/_logs/2021-02-24T23_12_53_708Z-debug.log
23:12:53.719    Error: Command "npm run build" exited with 1
Solution

  • I was able to solve this with adding correct referencing to my css module.

    For example.

    import styles from "./Something.module.css";

    to

    import styles from "../Something.module.css";

    Adding a relative path to the module helps.