部署到Heroku时出现错误，"Prop"className"不匹配"，但在本地

Question

我得到以下错误：

道具className不匹配。服务器："；jss1 jss5"；客户："；makeStyles-root-1 makeStyles-root-5"；

部署到Heroku时。一切在本地正常工作，但在部署时则不然。我的设置和这里差不多。

我发现了一个类似的Github问题，但没有任何建议对我有帮助

在本地，这些类似于makeStyles-${key}-${id}的类在我开发时被注入，但它在Heroku上不起作用。可能出了什么问题？

编辑

---

经过更多的调查，似乎将NODE_ENV设置为生产是它崩溃的原因。以下是我在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"
}

如果我将其更改为：

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

然后，它的工作方式与运行npm run dev时的工作方式相同。

我注意到，当使用NODE_ENV=production时，我所有使用makeStyles的Material UI组件都具有jss-'some-number'的类名。有些是jss1、jss5等。当NODE_ENV=development时，这些被makeStyles-root-1、makeStyles-footer-1等取代。

我的tsconfig.server.json:

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

这似乎根本与Heroku无关，而且我的配置有问题。任何帮助都将不胜感激。

---

重新生产问题

Github问题与可复制的回购。

Answer 1

在server.ts中，您正在检查一个不正确的环境变量，以确定您是否在生产模式下运行。更改线路

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

至

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

Answer 2

实际上，在package.json的行号8中，您有以下脚本：

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

这意味着NODE_ENV变量是production，因此在检查开发或生产环境的整个项目中，您应该检查NODE_ENV密钥，但在编号6的server.ts文件中，可以看到以下代码：

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

这意味着您正在检查NODE_DEV环境变量，它与NODE_ENV环境变量不同，因为这种不匹配导致了当前问题。

解决方案：为生产检查一致的环境变量。