# Nextjs : (window is not defined) react-apexcharts

Apex Charts tries to access the `window` object without checking it is available first, so it does not work in server contexts.  
The workaround is to ensure the library is only used in a browser context.

In NextJS, the usual method of ensuring a module only renders on the client is to use `next/dyanamic` with SSR disabled, but this approach doesn't work in NextJS 13:

```javascript
// nextjs13 - doesn't work - gives "window is not defined"
"use client";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });

export default function ApexChart(props: any) {
  return <Chart {...props} />;
}
```

My current workaround is to import `"react-apexcharts"` inside a useEffect to force NextJS to only import on the client side:

```javascript
// nextjs13 - works
"use client";
import { useEffect, useState } from "react";

export default function ApexChart(props: any) {
  const [Chart, setChart] = useState<any>();
  const hasType = typeof props?.type !== "undefined";

  useEffect(() => {
    import("react-apexcharts").then((mod) => {
      setChart(() => mod.default);
    });
  }, []);

  return hasType && Chart && <Chart {...props} />;
}
```

But in my opinion, I feel this is unnecessary if the Apex Charts library would just check that the window object is available first before trying to access it.