如何调试仅在生产部署中出现的 Next.js 水合错误

Question

我有一个部署到 Vercel 的 nextjs 应用程序。当运行下一个开发时，我没有出现水合错误。但在部署到 Vercel 时，生产版本显示了几个缩小的反应错误。

我的问题：我不知道如何调试它们。由于反应错误已缩小，因此没有太多有用的信息。

有谁知道在这种情况下如何禁用错误缩小或如何获得正确的堆栈跟踪？

Answer 1

不幸的是，没有好的方法来调试水合错误。我必须通过禁用组件并检查来缩小范围。事实证明，罪魁祸首正在使用

const formatCurrency = new Intl.NumberFormat(undefined,
   { style: "currency", currency: price.currency }
);

我需要指定区域设置，以便它在服务器和客户端之间匹配：

const formatCurrency = new Intl.NumberFormat(process.env.NEXT_PUBLIC_LNG ?? "de",
   { style: "currency", currency: price.currency }
);