GridColumns > Prop x1 did not match. Server: "85.333333" Client: "0"

[andreyvital]

For some reason I'm getting this error when using GridColumns:

import { curveMonotoneX } from "@vx/curve";
import { localPoint } from "@vx/event";
import { GridColumns, GridRows } from "@vx/grid";
import { scaleLinear, scaleTime } from "@vx/scale";
import { AreaClosed, Bar, Line } from "@vx/shape";
import { Tooltip, withTooltip } from "@vx/tooltip";
import { WithTooltipProvidedProps } from "@vx/tooltip/lib/enhancers/withTooltip";
import { bisector } from "d3-array";
import { timeFormat } from "d3-time-format";
import { NextPage } from "next";
import React from "react";

type Quote = {
  date: Date;
  close: number;
};

const formatDate = timeFormat("%b %d, '%y");

const min = (arr, fn) => Math.min(...arr.map(fn));
const max = (arr, fn) => Math.max(...arr.map(fn));
const extent = (arr, fn) => [min(arr, fn), max(arr, fn)];

const xStock = (d: Quote) => new Date(d.date);
const yStock = (d: Quote) => d.close;

const bisectDate = bisector<Quote, Date>((d) => new Date(d.date)).left;

class Area extends React.Component<
  WithTooltipProvidedProps<Quote> & {
    width: number;
    height: number;
    data: Quote[];
    margin: {
      top: number;
      left: number;
      bottom: number;
      right: number;
    };
  }
> {
  constructor(props) {
    super(props);
    this.handleTooltip = this.handleTooltip.bind(this);
  }

  handleTooltip({ event, data, xStock, xScale, yScale }) {
    const { showTooltip } = this.props;

    const { x } = localPoint(event);
    const x0 = xScale.invert(x);
    const index = bisectDate(data, x0, 1);

    const d0 = data[index - 1];
    const d1 = data[index];
    let d = d0;

    if (d1 && d1.date) {
      d = x0 - xStock(d0) > xStock(d1) - x0 ? d1 : d0;
    }

    showTooltip({
      tooltipData: d,
      tooltipLeft: xScale(xStock(d)),
      tooltipTop: yScale(yStock(d)),
    });
  }

  render() {
    const {
      data,
      width,
      height,
      margin,
      hideTooltip,
      tooltipData,
      tooltipTop,
      tooltipLeft,
    } = this.props;

    if (width < 10) {
      return null;
    }

    const xMax = width - margin.left - margin.right;
    const yMax = height - margin.top - margin.bottom;

    const xScale = scaleTime({
      range: [0, xMax],
      domain: extent(data, xStock),
    });

    const yScale = scaleLinear({
      range: [yMax, 0],
      domain: [0, max(data, yStock)],
      nice: true,
    });

    return (
      <div>
        <svg width={width} height={height}>
          <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stopColor="#a3d9a5" stopOpacity={1} />
              <stop offset="100%" stopColor="#FFFFFF" stopOpacity={0.2} />
            </linearGradient>
          </defs>

          <GridRows
            lineStyle={{ pointerEvents: "none" }}
            scale={yScale}
            width={xMax}
            stroke="rgba(0, 0, 0, 0.1)"
          />

          <GridColumns
            lineStyle={{ pointerEvents: "none" }}
            scale={xScale}
            height={yMax}
            stroke="rgba(0, 0, 0, 0.1)"
          />

          <AreaClosed
            data={data}
            x={(d) => xScale(xStock(d))}
            y={(d) => yScale(yStock(d))}
            yScale={yScale}
            strokeWidth={1.5}
            stroke={"#57ae5b"}
            fill={"url(#gradient)"}
            curve={curveMonotoneX}
          />

          <Bar
            x={0}
            y={0}
            width={width}
            height={height}
            fill="transparent"
            rx={14}
            onTouchStart={(event) =>
              this.handleTooltip({
                event,
                xStock,
                xScale,
                yScale,
                data,
              })
            }
            onTouchMove={(event) =>
              this.handleTooltip({
                event,
                xStock,
                xScale,
                yScale,
                data,
              })
            }
            onMouseMove={(event) =>
              this.handleTooltip({
                event,
                xStock,
                xScale,
                yScale,
                data,
              })
            }
            onMouseLeave={() => hideTooltip()}
          />

          {tooltipData && (
            <g>
              <Line
                from={{ x: tooltipLeft, y: 0 }}
                to={{ x: tooltipLeft, y: yMax }}
                stroke="rgba(92, 119, 235, 1.000)"
                strokeWidth={1}
                style={{ pointerEvents: "none" }}
              />

              <circle
                cx={tooltipLeft}
                cy={tooltipTop + 1}
                r={4}
                fill="black"
                fillOpacity={0.1}
                stroke="black"
                strokeOpacity={0.1}
                strokeWidth={2}
                style={{ pointerEvents: "none" }}
              />

              <circle
                cx={tooltipLeft}
                cy={tooltipTop}
                r={4}
                fill="rgba(92, 119, 235, 1.000)"
                stroke="white"
                strokeWidth={2}
                style={{ pointerEvents: "none" }}
              />
            </g>
          )}
        </svg>

        {tooltipData && (
          <div>
            <Tooltip
              top={tooltipTop - 12}
              left={tooltipLeft + 12}
              style={{
                backgroundColor: "#ccc",
                color: "#000",
                position: "absolute",
              }}
            >
              {`${yStock(tooltipData)}`}
            </Tooltip>

            <Tooltip
              top={yMax + 14}
              left={tooltipLeft}
              style={{
                transform: "translateX(-50%)",
                position: "absolute",
              }}
            >
              {formatDate(xStock(tooltipData))}
            </Tooltip>
          </div>
        )}
      </div>
    );
  }
}

const AreaWithTooltip = withTooltip(Area);

const Index: NextPage = () => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
      }}
    >
      <AreaWithTooltip
        data={[
          {
            date: "2020-02-10",
            close: 7.3,
          },
          {
            date: "2020-02-11",
            close: 7.18,
          },
        ]}
        width={1024}
        height={400}
        margin={{
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        }}
      />
    </div>
  );
};

export default Index;

[andreyvital]

I found the issue:

% docker run -it --rm -e TZ=America/Sao_Paulo node:14 node -e 'console.log(new Date("2020-02-14").getTimezoneOffset())'
180
% docker run -it --rm -e TZ=America/Sao_Paulo node:13 node -e 'console.log(new Date("2020-02-14").getTimezoneOffset())'
180
% docker run -it --rm -e TZ=America/Sao_Paulo node:12 node -e 'console.log(new Date("2020-02-14").getTimezoneOffset())'
180
% docker run -it --rm -e TZ=America/Sao_Paulo node:11 node -e 'console.log(new Date("2020-02-14").getTimezoneOffset())'
120
% node -e 'console.log(new Date("2020-02-14").getTimezoneOffset())'
120

My country doesn't have DST anymore, and, for some reason, the node that was on my machine (which was node 12) had ICU out of date. On browser the date was correctly parsed but on the server it came with 1 hour difference, which was causing that render mismatch.