在部署到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的重要UI组件都有classNames of jss-'some-number'。有些是jss1，jss5等，当NODE_ENV=development时，这些get被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键，但是在server.ts文件中，在线编号为6时，可以看到以下代码：

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

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

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