ReferenceError: window is not defined in Next.js using npm clevertap-react

Question

I started to integrate CleverTap for Web Web SDK Quick Start Guide into my application which is Next.js

After googling found some packages such as clevertap-web-sdk, clevertap-react and decided to go (integrate) using clevertap-web-sdk npm package. Followed the documentation as the way (to be more specific followed React Example as it suggests) but having issue.

Changed to another package clevertap-react. Here also found same issue.

ReferenceError: window is not defined

_app.tsx

import React, { useEffect, useState } from "react";
import type { AppProps } from "next/app";
import { appWithTranslation } from "next-i18next";
import { Hydrate, QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

import nextI18NextConfig from "../next-i18next.config.js";

import "tailwindcss/tailwind.css";
import "styles/globals.scss";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { useRouter } from "next/router";
import SvgPageLoading from "components/color-icons/PageLoading";
// import { PageLoading } from "components/color-icons/";

import { DefaultSeo } from 'next-seo';
import SEO from 'next-seo.config';
import ClevertapReact from 'clevertap-react';

ClevertapReact.initialize("TEST-61c-a12");

function MyApp({ Component, pageProps }: AppProps) {
  const [queryClient] = React.useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            refetchOnWindowFocus: false,
            staleTime: Infinity,
          },
        },
      })
  );
  const router = useRouter();
  const [isAnimating, setIsAnimating] = useState(false);
  useEffect(() => {
    const handleStart = () => {
      setIsAnimating(true);
    };
    const handleStop = () => {
      setIsAnimating(false);
    };

    router.events.on("routeChangeStart", handleStart);
    router.events.on("routeChangeComplete", handleStop);
    router.events.on("routeChangeError", handleStop);

    return () => {
      router.events.off("routeChangeStart", handleStart);
      router.events.off("routeChangeComplete", handleStop);
      router.events.off("routeChangeError", handleStop);
    };
  }, [router]);
  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <DefaultSeo {...SEO} />
        <Component {...pageProps} />
        {isAnimating && (
          <div className="fixed top-0 left-0 flex items-center justify-center w-screen h-screen overflow-visible bg-white bg-opacity-80 z-overlay top-z-index">
            <SvgPageLoading />
          </div>
        )}
        <ReactQueryDevtools initialIsOpen={false} />
      </Hydrate>
    </QueryClientProvider>
  );
}

export default appWithTranslation(MyApp, nextI18NextConfig);

whygee · Accepted Answer · 2021-12-15T11:14:33.707

2

It's because Next is trying to render your component on the server and the window object doesn't exist on the server.

Can you try:

import dynamic from 'next/dynamic'

const ClevertapReact = dynamic(
  () =>
    import("clevertap-react").then((clevertap) =>
      clevertap.initialize("YOUR_ACCOUNT_ID")
    ),
  { ssr: false }
);

edited Dec 15 '21 at 11:14

answered Dec 15 '21 at 10:31

whygee

1,783
6
12

Thanks for the answer. Where to write this piece of code? I mean in `_app.tsx` ? – Rashed Rahat Dec 15 '21 at 10:40
It should replace your `import ClevertapReact from 'clevertap-react';` – whygee Dec 15 '21 at 10:42
`TS2345: Argument of type '() => void' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'. Type '() => void' is not assignable to type '() => LoaderComponent<{}>'. Type 'void' is not assignable to type 'LoaderComponent<{}>'.` This is returning TS error – Rashed Rahat Dec 15 '21 at 10:59
I see your update. I already tried. But how can i use `clevertap.init('YOUR_ACCOUNT_ID'); ` ? – Rashed Rahat Dec 15 '21 at 11:04
`ClevertapReact.initialize("Your_ACCOUNT_ID");` doesn't work? – whygee Dec 15 '21 at 11:07
No. Tried outside component also inside root component (useEffect) but not work – Rashed Rahat Dec 15 '21 at 11:10
what's the error? – whygee Dec 15 '21 at 11:10
`ReferenceError: window is not defined` – Rashed Rahat Dec 15 '21 at 11:10
How to achieve onClick event? Please have a look: https://github1s.com/CleverTap/clevertap-web-sdk/blob/9bf00a67fd64a5e26c3493bf3471c74268c834eb/example-apps/react/src/App.js @whygee – Rashed Rahat Dec 19 '21 at 06:59

ReferenceError: window is not defined in Next.js using npm clevertap-react

1 Answers1