Javascript 获取错误，部署到Heroku时，`Prop`className`不匹配`

我得到以下错误：

属性

className

不匹配。服务器：“jss1 jss5”客户端：“makeStyles-root-1 makeStyles-root-5”

部署到Heroku时。在本地，一切正常工作，但在部署时就不行了。我的设置和你的差不多

我发现了一个类似的建议，但没有一个对我有帮助

在本地，这些类似于

makeStyles-${key}-${id}

的类是在我开发时注入的，但在Heroku上不起作用。出了什么问题

编辑

---

经过更多的调查，似乎将NODE_ENV设置为production就是它崩溃的原因。以下是我在

package.json中的脚本：

“脚本”：{
“dev”：“nodemon server.ts”，
“build”：“下一个build&&tsc--project tsconfig.server.json”，
“开始”：“NODE_ENV=production NODE.next/production server/server.js”
}

如果我将其更改为：

。。。
“开始”：“NODE_ENV=development NODE.next/production server/server.js”
^^^^^^^^^^^
...

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

我注意到，当
NODE\u ENV=production
时，所有使用
makeStyles
的Material UI组件的类名都是
jss-“some-number”
。一些是
jss1
，
jss5
，等等。当
NODE_ENV=development
时，它们会被替换为
makeStyles-root-1
，
makeStyles-footer-1
，等等

My
tsconfig.server.json
：

{
“扩展”：“/tsconfig.json”，
“编译器选项”：{
“noEmit”：错，
“模块”：“commonjs”，
“outDir”：“.next/production server/”
},
“包括”：[“***.ts”]
}

看起来这和Heroku一点关系都没有，我的配置也有问题。任何帮助都将不胜感激



出现可复制回购问题。
在
server.ts
中，您正在检查不正确的环境变量，以确定是否在生产模式下运行。
换线

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

到

实际上，在联机编号8中，您有以下脚本：

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

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

const dev=process.env.NODE\u dev！='生产",；

这意味着您正在检查
NODE\u DEV
环境变量，它与
NODE\u ENV
环境变量不同，因为这种不匹配，所以您存在当前问题

解决方案：检查生产环境变量的一致性。
在SSR过程中，样式化组件似乎处理不当。我建议再次检查设置：这个问题是特定于材质UI的，而不是
样式化组件
材质UI只是一个UI。我猜：
样式化组件
将类名附加到DOM节点。SSR在生产中启用，它注入
jss
，而不是正确的类名。因此，SSR+
样式化组件
设置中肯定存在问题。它位于问题末尾引用的Github项目中。@Mike K既然您已经在Github上将其标记为解决方案，为什么不在此处也标记它并奖励奖金呢。而不是让其他人进行更多的调查，只是为了发现问题已经解决了。当然。当时我没能赏金，因为有时间限制
"start": "NODE_ENV=production node .next/production-server/server.js"