Getting error, `Prop `className` did not match` when deploying to Heroku, but works locally

I'm getting the following error:

Prop className did not match. Server: "jss1 jss5" Client: "makeStyles-root-1 makeStyles-root-5"

When deploying to Heroku. Everything works fine normally locally, but not when deployed. I pretty much have the same setup as here.

I've found a similar Github issue, but none of the suggestions there helped me.

Locally, these classes similar to makeStyles-${key}-${id} are injected when I'm developing, but it's not working on Heroku. What could be going wrong?

Edit

---

After more investigation, it seems that setting NODE_ENV to production is why it's breaking. Here are my scripts in package.json:

    "scripts": {
        "dev": "nodemon server.ts",
        "build": "next build && tsc --project tsconfig.server.json",
        "start": "NODE_ENV=production node .next/production-server/server.js"
    }

If I change it to:

    ...
        "start": "NODE_ENV=development node .next/production-server/server.js"
                           ^^^^^^^^^^^
    ...

Then it works the same way as it would work if I were to run npm run dev.

I've noticed that when NODE_ENV=production, all my Material UI components that use makeStyles have classNames of jss-'some-number'. Some are jss1, jss5, etc. When NODE_ENV=development, these get replaces with makeStyles-root-1, makeStyles-footer-1, etc.

My tsconfig.server.json:

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "noEmit": false,
        "module": "commonjs",
        "outDir": ".next/production-server/"
    },
    "include": ["**/*.ts"]
}

It seems that this isn't related to Heroku at all, and there's something wrong with my configuration. Any help would be much appreciated.

---

Github issue with a reproducible repo.

from Getting error, `Prop `className` did not match` when deploying to Heroku, but works locally