Error when using the showWeekdayLabels parameter

[maodaisuki]

Hi, I'm having some trouble. Here is my code.

"use client";
import styles from "./heatmap.module.css";
import React from "react";
import { Tooltip as ReactTooltip } from "react-tooltip";
import "react-tooltip/dist/react-tooltip.css";
import ActivityCalendar from "react-activity-calendar";
const HeatmapBlock = () => {
  const data = [
    {
      date: "2024-01-01",
      count: 2,
      level: 1,
    },
  ];
  return (
    <div className={styles.container}>
      <ActivityCalendar
        blockRadius={2}
        blockMargin={2}
        blockSize={12}
        theme={{
          light: ["#edeff2", "#646e93", "#646e93", "#798bc5", "#8ea9fa"],
          dark: ['#636466', '#646e93', '#646e93', '#798bc5', '#8ea9fa'],
        }}
        data={data}
        labels={{
          weekdays: ["S", "M", "T", "W", "T", "F", "S"],
        }}
        showWeekdayLabels
        renderBlock={(block, activity) =>
          React.cloneElement(block, {
            "data-tooltip-id": "react-tooltip",
            "data-tooltip-html": `${activity.count} activities on ${activity.date}`,
          })
        }
      />
      <ReactTooltip id="react-tooltip" />
    </div>
  );
};

export default HeatmapBlock;

Although it is able to run, the console outputs an error.

⨯ ..\src\utils\calendar.ts (195:11) @ calcTextDimensions
 ⨯ Error: calcTextDimensions() requires browser APIs
    at Array.reduce (<anonymous>)
digest: "2520002460"
  193 | function calcTextDimensions(text: string, fontSize: number) {
  194 |   if (typeof document === 'undefined' || typeof window === 'undefined') {
> 195 |     throw new Error('calcTextDimensions() requires browser APIs');
      |           ^
  196 |   }
  197 |
  198 |   if (fontSize < 1) {
 GET / 500 in 583ms

[maodaisuki]

By the way, I am using nextjs14, and the react-activity-calendar version is 2.2.8

[grubersjoe]

Heyo. Thanks for reporting this bug!

Fixed in react-activity-calendar@2.2.9, please try this version. Tested successfully with Next.js 14.2.3.

[maodaisuki]

It worked, thank you!