Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ReferenceError: window is not defined #461

Open
swastkk opened this issue Jan 20, 2024 · 9 comments
Open

ReferenceError: window is not defined #461

swastkk opened this issue Jan 20, 2024 · 9 comments

Comments

@swastkk
Copy link

swastkk commented Jan 20, 2024

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
@swastkk swastkk changed the title Refernece window not defined ReferenceError: window is not defined Jan 20, 2024
@prabhuignoto
Copy link
Owner

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

@swastkk
Copy link
Author

swastkk commented Jan 20, 2024

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

I am working on NextJS

@prabhuignoto
Copy link
Owner

prabhuignoto commented Jan 23, 2024 •
edited
Loading

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

@KarsonJo
Copy link

KarsonJo commented Feb 3, 2024

@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
Copy link

SaiRev0 commented Feb 8, 2024 •
edited
Loading

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

@KarsonJo
Copy link

KarsonJo commented Feb 8, 2024

@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
Copy link

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

@KarsonJo
Copy link

@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
Copy link

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

@MekhiHart MekhiHart mentioned this issue Oct 22, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@prabhuignoto @mrbeandev @KarsonJo @swastkk @SaiRev0 @Milan-Bhingradiya