ReferenceError: window is not defined

[swastkk]

While running

npm run dev

Getting this error

⨯ node_modules/react-chrono/dist/react-chrono.esm.js (1:19558) @ window
⨯ Internal error: ReferenceError: window is not defined
   at Te (./node_modules/react-chrono/dist/react-chrono.esm.js:1082:5)
   at xo (./node_modules/react-chrono/dist/react-chrono.esm.js:5336:93)
   at ai (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:6505)
   at /home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:11284
   at ab (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:13038)
   at e (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46298)
   at aS (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
   at ab (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:41727)
   at e (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46298)
   at aS (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
   at ag (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:7923)
   at /home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:13014
   at ab (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:13038)
   at e (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46298)
   at aS (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
   at ag (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:7923)
   at /home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:13014
   at ab (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:13038)
   at e (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46298)
   at aS (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
   at a_ (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50165)
   at /home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:38901
   at ab (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:39374)
   at e (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46298)
   at aS (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
   at a_ (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50165)
   at ak (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49406)
   at e (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46647)
   at aS (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
   at a_ (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50165)
   at /home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:38901
   at ab (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:39374)
   at e (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46298)
   at aS (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
   at ag (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:7923)
   at /home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:13014
   at ab (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:13038)
   at e (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46298)
   at aS (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
   at ag (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:7923)
   at /home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:13014
   at ab (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:13038)
   at ab (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:43088)
   at e (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46298)
   at aS (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
   at a_ (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50165)
   at ak (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49406)
   at e (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46647)
   at aS (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
   at ab (/home/swastik/Desktop/tett/prody-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:41727)
null

[prabhuignoto]

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

[swastkk]

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

I am working on NextJS

[prabhuignoto]

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

[KarsonJo]

@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?

[SaiRev0]

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

[KarsonJo]

@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

[Milan-Bhingradiya]

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

[KarsonJo]

@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.

[mrbeandev]

@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

thanks this worked for me 👍🏻