reactjs Next.js“引用错误：未使用gapi-script定义”窗口

jdg4fx2g 于 2022-11-04 发布在 React

关注(0)|答案(1)|浏览(145)

我已经尝试了每一个解决办法，但是，由于某种原因，我一直得到下面的截图错误...不知道为什么？
服务器错误
参考错误：未定义窗口此错误是在生成页面时发生的。所有控制台日志都将显示在终端窗口中。调用堆栈eval node_modules/gapi-script/gapi脚本. js（1：9）。/node_modules/gapi-script/gapi脚本. js文件：[...]/.next/server/pages/[...]/[id].js（98：1）webpack_require文件：/[...]/.next/server/webpack-runtime.js（33：42）

import { useEffect } from 'react';
import Head from 'next/head';
import styles from '../../../styles/Home.module.css';
import { GoogleLoginButton } from '../../../components';
import { gapi } from 'gapi-script';
export async function getServerSideProps(context: any) {
  const res = await fetch(
    `http://localhost:3000/api/...`,
  );
  const data = await res.json();
  return { props: { data } };
}
const GAPI_CONFIG = {
  apiKey: process.env.GOOGLE_API_KEY,
  clientId: process.env.CLIENT_ID,
  scope: process.env.GOOGLE_SCOPE,
};
export default function NblOneTeam({ data }: any) {
  useEffect(() => {
    function start() {
      gapi.client.init(GAPI_CONFIG);
    }
    gapi.load('client:auth2', start);
  });
  return (
    <div className={styles.container}>
      <Head>
        <title>NBL1 Scout Generator</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <h1>Hi NBL1 Teams</h1>
        <GoogleLoginButton />
        {data.map((player: any) => {
          return <h2>{player.name}</h2>;
        })}
      </main>
    </div>
  );
}

正如我提到的，我已经尝试了如下的变通方法：Window is not defined in nextJS

reactjs

来源：https://stackoverflow.com/questions/74289041/next-js-referenceerror-window-is-not-defined-with-gapi-script

1条答案

按热度按时间

rfbsl7qr1#

NextJs在服务器端构建页面，而窗口只能在客户端访问。当页面加载时，窗口在NextJs中始终是未定义的
解决方法是动态导入gapi。

useEffect(() => {
    async function start() {
     const gapi = (await import('gapi-script')).default
      gapi.client.init(GAPI_CONFIG);
    }
    gapi.load('client:auth2', start);
}, []);

赞(0）回复(0）举报 2022-11-04

我来回答

reactjs Next.js“引用错误：未使用gapi-script定义”窗口

1条答案

相关问题

热门标签

最新问答