search

prabhuignoto / react-chrono

🕑 Modern Timeline Component for React
https://react-chrono.prabhumurthy.com
MIT License
3.95k stars 213 forks source link

ReferenceError: window is not defined #461

Open swastkk opened 9 months ago

swastkk commented 9 months ago

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 commented 9 months ago

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

swastkk commented 9 months ago

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

I am working on NextJS

prabhuignoto commented 9 months ago

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

KarsonJo commented 9 months ago

@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 commented 9 months ago

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

KarsonJo commented 9 months ago

@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 commented 9 months ago

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

KarsonJo commented 8 months ago

@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 commented 3 months ago

@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 👍🏻