All the styles on my project are defined inside css modules, and only recently I noticed that, on the production build generated by Nextjs, some of them are overridden by other styles (this would only make sense if they were defined on the same module, which is not the case). This breaks my app on production, but everything seems to work just fine on development.
Here's an example:
///mobile.module.css
.expandIcon {
width: 12px;
}
///mobile.tsx
import React from "react";
import styles from "./mobile.module.css";
import { NextPage } from "next";
import OpenInFullRoundedIcon from "@mui/icons-material/OpenInFullRounded";
const mobile: NextPage = () => {
return <OpenInFullRoundedIcon className={styles.expandIcon} />
};
export default mobile;
Here's how this class is loaded on development:
And here's how it's overridden on prod:
And to make it worse, the class overriding mine is not even defined on my project. I'm somewhat new to NextJs, so I would appreciate any insight on this issue.