ReferenceError：在 Next.js 中未使用 npmcletap-react 定义窗口 [重复]

Posted 2023-02-22

【中文标题】ReferenceError：在 Next.js 中未使用 npmcletap-react 定义窗口 [重复]

【英文标题】：ReferenceError: window is not defined in Next.js using npm clevertap-react [duplicate]

【发布时间】：2022-01-18 13:01:18

【问题描述】：

我开始将CleverTap for Web Web SDK Quick Start Guide 集成到我的应用程序 Next.js

谷歌搜索后发现一些包，如clevertap-web-sdk，clevertap-react，并决定使用clevertap-web-sdknpm包去（集成）。遵循文档作为方式（更具体地说，遵循React Example 的建议）但有问题。

更改为另一个包clevertap-react。这里也发现了同样的问题。

ReferenceError：未定义窗口

---

_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);

【问题讨论】：

这是否回答了您的问题：Why am I getting ReferenceError: self is not defined when I import a client-side library??

【参考方案1】：

这是因为 Next 试图在服务器上渲染你的组件，而服务器上不存在 window 对象。

你可以试试：

import dynamic from 'next/dynamic'

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

【讨论】：

感谢您的回答。这段代码在哪里写？我的意思是_app.tsx ?

它应该替换你的import ClevertapReact from 'clevertap-react';

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<>'. 这是返回 TS 错误

我看到了你的更新。我已经试过了。但是我该如何使用clevertap.init('YOUR_ACCOUNT_ID'); ？

ClevertapReact.initialize("Your_ACCOUNT_ID"); 不起作用？