TypeError: Cannot read properties of undefined (reading 'toString')

[AH-dark]

Description

I'm using react-apexcharts with Next.js framework and everything works fine in production mode. But in development mode, an error TypeError: Cannot read properties of undefined (reading 'toString') will appear when the page is rendered for the first time. I don't know what caused this because everything is bundled with Webpack.

Expected Behavior

In non-SSR mode, charts should render normally.

Actual Behavior

Next.js throw an error.

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'toString')

Call Stack
t.value
node_modules\.pnpm\[email protected]\node_modules\apexcharts\dist\apexcharts.common.js (6:389691)
t.value
node_modules\.pnpm\[email protected]\node_modules\apexcharts\dist\apexcharts.common.js (6:386053)
t.value
node_modules\.pnpm\[email protected]\node_modules\apexcharts\dist\apexcharts.common.js (14:36706)
t.eval [as create]
node_modules\.pnpm\[email protected]\node_modules\apexcharts\dist\apexcharts.common.js (6:4476)
eval
node_modules\.pnpm\[email protected]\node_modules\apexcharts\dist\apexcharts.common.js (14:36097)
new Promise
<anonymous>
t.value
node_modules\.pnpm\[email protected]\node_modules\apexcharts\dist\apexcharts.common.js (14:21667)
r.value
node_modules\.pnpm\[email protected]_g3lvop6jrvmpqnlf3mxot4n2ym\node_modules\react-apexcharts\dist\react-apexcharts.min.js (1:2694)
invokeLayoutEffectMountInDEV
node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js (25133:0)
invokeEffectsInDev
node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js (27351:0)
commitDoubleInvokeEffectsInDEV
node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js (27327:0)
flushPassiveEffectsImpl
node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js (27056:0)
flushPassiveEffects
node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js (26984:0)
eval
node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js (26769:0)
workLoop
node_modules\.pnpm\[email protected]\node_modules\scheduler\cjs\scheduler.development.js (266:0)
flushWork
node_modules\.pnpm\[email protected]\node_modules\scheduler\cjs\scheduler.development.js (239:0)
performWorkUntilDeadline
node_modules\.pnpm\[email protected]\node_modules\scheduler\cjs\scheduler.development.js (533:0)

Screenshots

Reproduction

const Component = () => {
  const series = useMemo<ApexAxisChartSeries>(
    () => [
      {
        name: t("traffic.chart.upload", { context: "name" }).toString(),
        data: dataMap.map((d) => d.u) || Array(tick).fill(0),
        color: theme.palette.warning.main
      },
      {
        name: t("traffic.chart.download", { context: "name" }).toString(),
        data: dataMap.map((d) => d.d) || Array(tick).fill(0),
        color: theme.palette.success.main
      },
      {
        name: t("traffic.chart.total", { context: "name" }).toString(),
        data: dataMap.map((d) => d.total) || Array(tick).fill(0),
        color: theme.palette.primary.light
      }
    ],
    [t, dataMap, tick, theme.palette.warning.main, theme.palette.success.main, theme.palette.primary.light]
  );

  const options = useMemo<ApexCharts.ApexOptions>(() => {
    return {
      chart: {
        height: 280,
        type: "area",
        toolbar: {
          show: false
        }
      },
      fill: {
        type: "gradient",
        gradient: {
          shadeIntensity: 1,
          type: "vertical",
          inverseColors: false,
          opacityFrom: 0.5,
          opacityTo: 0
        }
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        curve: "smooth",
        width: 2
      },
      grid: {
        show: true,
        strokeDashArray: 0,
        position: "back",
        borderColor: theme.palette.divider,
        xaxis: {
          lines: {
            show: true
          }
        },
        yaxis: {
          lines: {
            show: true
          }
        }
      },
      xaxis: {
        categories: Array.from(new Array(tick))
          .map((_, i) => dayjs().subtract(i, "day").toISOString())
          .reverse(),
        labels: {
          formatter: (value: string) => dayjs(value).format("MM.DD"),
          style: {
            colors: Array.from(new Array(tick)).map(() => secondary)
          }
        },
        axisBorder: {
          show: false,
          color: theme.palette.divider
        },
        tickAmount: tick,
        axisTicks: {
          show: false
        }
      },
      yaxis: {
        labels: {
          formatter: (val: number) =>
            String(
              filesize(val, {
                base: 2,
                standard: "jedec",
                round: 2,
                roundingMethod: "floor"
              })
            ),
          style: {
            colors: Array.from(new Array(tick)).map(() => secondary)
          }
        },
        axisBorder: {
          show: false
        },
        axisTicks: {
          show: false
        }
      },
      tooltip: {
        theme: theme.palette.mode,
        x: {
          formatter: (val) =>
            dayjs()
              .subtract(tick - val, "day")
              .format("YYYY-MM-DD")
        },
        y: {
          formatter: (value) =>
            String(filesize(value, { base: 2, standard: "jedec", round: 2, roundingMethod: "floor" }))
        }
      },
      legend: {
        show: false
      }
    };
  }, [theme.palette.divider, theme.palette.mode, tick, secondary]);

  return <ReactApexChart options={options} series={series} type="area" height={280} />;
}

[AH-dark]

This error is only triggered when reactStrictMode is true.

[brianlagunas]

Please provide a reproduction link to a codepen (not a code snippet) or this issue will be closed.

[robert-nash]

I found that this problem is fixed if the width and height props are passed to the chart explicitly, even if the values are "100%".

[robert-nash]

@brianlagunas I'm not sure how to exhibit this in a codepen but I have created a repository exhibiting this problem. https://github.com/robert-nash/apexcharts-nextjs-demo Creating a codespace on github from the repository allows you to try this out by running npm run dev from the codespace.

[brianlagunas]

@robert-nash thanks for the reproduction. I'll reopen it for you.

[rpateld]

I'm encountering an issue when using react-apexcharts in a Next.js application. The library works fine during development (npm run dev), but it fails during the build process (npm run build).

The error message I'm receiving is: Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'toString').

Here's the relevant code from my AppChart.tsx file:

import Chart from "react-apexcharts";
// import dynamic from "next/dynamic";
// const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });

I've tried to use Next.js's dynamic imports with { ssr: false } to only import react-apexcharts on the client side, as I suspect the issue might be related to server-side rendering. However, this workaround causes issues during the build process.

Any help or guidance on this issue would be greatly appreciated.

Thank you!

[iurynathan]

I had this problem, and it turns out that when the width is not entered, I didn't test it in production, this error was in the development environment.

return <ReactApexChart options={options} series={series} type="area" width={'100%'} height={280} />;

[junedchhipa]

fixed with commit