I am getting error "Window is not defined while pushing the code to the deployment or build

[vast perch]

"use client";
import React, { useState } from "react";
import ReactApexChart from "react-apexcharts";

interface DonutPieChartProps {}

interface DonutPieChartState {
  series: number[];
  options: {
    chart: {
      type: string;
    };
    labels: string[];
    responsive: {
      breakpoint: number;
      options: {
        chart: {
          width: number;
        };
        legend: {
          position: string;
        };
      };
    }[];
    legend: {
      show: boolean;
    };
    dataLabels: {
      enabled: boolean;
    };
    plotOptions: {
      pie: {
        startAngle: number;
        endAngle: number;
        donut: {
          size: string;
        };
      };
    };
  };
}

const DonutPieChart: React.FC<DonutPieChartProps> = (props) => {
  const [state, setState] = useState<DonutPieChartState>({
    series: [44, 55, 13, 43, 22],
    options: {
      chart: {
        type: "donut",
      },
      labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5"],
      responsive: [
        {
          breakpoint: 480,
          options: {
            chart: {
              width: 200,
            },
            legend: {
              position: "bottom",
            },
          },
        },
      ],
      legend: {
        show: false,
      },
      dataLabels: {
        enabled: false,
      },
      plotOptions: {
        pie: {
          startAngle: -90,
          endAngle: 90,
          donut: {
            size: "50%", // Set the size of the donut to only half
          },
        },
      },
    },
  });

  return (
    <div>
      <div id="chart">
        <ReactApexChart
          options={{
            ...state.options,
            chart: {
              ...state.options.chart,
              type: "donut",
            },
          }}
          series={state.series}
          type="donut"
        />
      </div>
    </div>
  );
};

export default DonutPieChart;

Here is the code and the problem is it doesn't show any error in dev

[severe oasis]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[vast perch]

Up!

[echo hawk]

https://nextjs-faq.com/browser-api-client-component

your react-apexcharts library is not server-side render-able so you need to use next/dynamic on it with ssr: false

[vast perch]

can you please tell me the implementation of that using my code ?

[echo hawk]

check https://github.com/apexcharts/react-apexcharts/issues/526 or https://github.com/apexcharts/react-apexcharts/issues/469

[vast perch]

now i am getting this error

[echo hawk]

it doesnt look related to the window error

what fix are you using in the above two github issue links i gave you?

[vast perch]

i g the error is from the state i created but somehow its gone now

[vast perch]

it works now i used the next/dynamic in the useEffect

thanks for the help

[echo hawk]

no, you use either next/dynamic or useEffect

no need of both

[severe oasis]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1201780314351865886 message)

[vast perch]

useEffect(() => {
    const loadApexChart = async () => {
      const dynamicApexChart = await import("react-apexcharts");
      setApexChart(() => dynamicApexChart);
    };
    loadApexChart();
  }, []);

[echo hawk]

yes that works

[vast perch]

yes so should i use it or not ?

[echo hawk]

Well in the above, you are not using next/dynamic right? Yes your code works well, no need to change anything