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

Question

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.

---

Re-production issue

Github issue with a reproducible repo.

Answer 1

In server.ts , you are checking an incorrect environment variable to determine whether you are running in production mode. Change the line

const dev = process.env.NODE_DEV !== 'production';

to

const dev = process.env.NODE_ENV !== 'production';

Answer 2

Actually, in your package.json on the line number 8 you have this script:

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

That means the NODE_ENV variable is production , so in the whole the project for checking development or production environment you should check the NODE_ENV key but in your server.ts file on line number 6 the following code is seen:

const dev = process.env.NODE_DEV !== 'production';

That means you are checking the NODE_DEV environment variable and it is different from the NODE_ENV environment variable, because of this mismatching you have the current issue.

Solution : check a consistent environment variable for production.