ReferenceError: window is not defined about react-chrono HOT 8 OPEN

@SaiRev0 Sorry, I didn't find it, only a workaround.
I tried installing an earlier version (2.4.0) and it seems to not have this problem. But unfortunately this version has the problem of inconsistent random ids generated by client and server.
Recent releases seem to use more browser APIs, so I ended up wrapping it into a client-only component.

// react-chrono-client.ts
"use client"

import type { Chrono as ChronoType } from "react-chrono";
import dynamic from 'next/dynamic'

export const Chrono = dynamic(() => import('react-chrono').then(lib => lib.Chrono), {
  ssr: false,
}) as typeof ChronoType

from react-chrono.

@swastkk have you tried running the app with the use client directive

Yes, I tried that and it doesn't work. The reason is that nextjs pre-renders client components on server as well. So even if it's marked as use client, chrono will still be rendered on server. Maybe putting window access into useEffect would work?

from react-chrono.

@swastkk are you running this from a Next JS app or is it a React SPA.

from react-chrono.

@swastkk are you running this from a Next JS app or is it a React SPA.

I am working on NextJS

from react-chrono.

@swastkk have you tried running the app with the use client directive

from react-chrono.

@KarsonJo Hey, so did you find any solution ??

from react-chrono.

@KarsonJo what u did here can u help me to understand ? i want to render chrono component at client side..

from react-chrono.

@KarsonJo what u did here can u help me to understand ? i want to render chrono component at client side..

@Milan-Bhingradiya dynamic with ssr: false defines a component that wraps Chrono and turns off server-side rendering. After that, you need to import Chrono from this file (called react-chrono-client.ts in this example) instead. Then you can use it as usual without rendering on server.

from react-chrono.