6

I have a nextjs app that gets deployed to Vercel. When running next dev, I have no hydration errors. But when deploying to Vercel, the production build shows several minified react errors.

My problem: I don't know how to debug them. Since the react error is minified there isn't a lot of helpful information.

Does anyone know how disable error minification in such a case or how to get a proper stacktrace?

florian norbert bepunkt
  • 2,099
  • 1
  • 21
  • 32
  • I also got that, and only for production. Preview branches work just fine. – Luiz Henrique Guerra Nov 08 '22 at 20:12
  • I got it, at least in my case. I still don't know why this happens only in production but it concerns date strings not correctly handled in my application. I changed the timezone of my SO and could reproduce the issue. This happens because different timezones in the client and server create a difference in the final markup because of poorly handled date strings (at least in my case). – Luiz Henrique Guerra Nov 08 '22 at 20:51
  • Okay, it turns out, that the culprit is using `const formatCurrency = new Intl.NumberFormat(undefined, { style: "currency", currency: price.currency });` – florian norbert bepunkt Nov 12 '22 at 15:44

1 Answers1

4

Unfortunately, there is no good way to debug hydration errors. I had to narrow it down by disabling components and check. It turns out, that the culprit is using

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

I need to specify the locale, so it matches between server and client:

const formatCurrency = new Intl.NumberFormat(process.env.NEXT_PUBLIC_LNG ?? "de",
   { style: "currency", currency: price.currency }
);
florian norbert bepunkt
  • 2,099
  • 1
  • 21
  • 32