Next.js: 문서가 정의되지 않았습니다.

Next.js: 문서가 정의되지 않았습니다.

사람들이 결제할 수 있는 결제 양식을 작성하려고 하는데 계속 오류가 납니다.

문서가 정의되지 않았습니다.

Next.js를 사용하고 있습니다.아래 코드를 참조해 주세요.

import React from "react";
import {Elements, StripeProvider} from 'react-stripe-elements';
import CheckoutForm from '../../components/Payment/CheckoutForm';
import { useRouter } from 'next/router';


var stripe_load = () => {
    var aScript = document.createElement('script');
    aScript.type = 'text/javascript';
    aScript.src = " https://js.stripe.com/v3/";

    document.head.appendChild(aScript);
    aScript.onload = () => {

    };
};

function Payment({host}) {
    const key = host.includes('localhost') ? 'test' : 't';

    stripe_load();

    const router = useRouter();

    return (
        <div className="Payment Main">
            <StripeProvider apiKey={key}>
                <Elements>
                    <CheckoutForm planid={router.query.id}/>
                </Elements>
            </StripeProvider>
            <br/>
            <br/>
            <p>Powered by Stripe</p>
        </div>
    );
};


Payment.getInitialProps = async ctx => {
    return { host: ctx.req.headers.host }
};

export default Payment

서버 렌더링 모드에서는 문서가 정의되지 않은 것 같습니다.클래스 라이프 사이클 메서드 또는 useEffect 내에서 사용할 수 있어야 합니다.

import React, {useEffect} from "react";
import {Elements, StripeProvider} from 'react-stripe-elements';
import CheckoutForm from '../../components/Payment/CheckoutForm';
import { useRouter } from 'next/router';


var stripe_load = () => {
    var aScript = document.createElement('script');
    aScript.type = 'text/javascript';
    aScript.src = " https://js.stripe.com/v3/";

    document.head.appendChild(aScript);
    aScript.onload = () => {

    };
};

function Payment({host}) {
    const key = host.includes('localhost') ? 'test' : 't';

    useEffect(() => {
      var aScript = document.createElement('script');
       aScript.type = 'text/javascript';
       aScript.src = " https://js.stripe.com/v3/";

       document.head.appendChild(aScript);
       aScript.onload = () => {

       };
    }, [])
    //stripe_load();

    const router = useRouter();

    return (
        <div className="Payment Main">
            <StripeProvider apiKey={key}>
                <Elements>
                    <CheckoutForm planid={router.query.id}/>
                </Elements>
            </StripeProvider>
            <br/>
            <br/>
            <p>Powered by Stripe</p>
        </div>
    );
};


Payment.getInitialProps = async ctx => {
    return { host: ctx.req.headers.host }
};

export default Payment

포장을 해야 합니다.document검증자 사용process.browser이 문서는 클라이언트 측에 속해 있으며 서버 측에서 nextjs 렌더 시 오류가 발생했기 때문입니다.

var stripe_load = () => {
    if (process.browser) {
        var aScript = document.createElement('script');
        aScript.type = 'text/javascript';
        aScript.src = " https://js.stripe.com/v3/";

        document.head.appendChild(aScript);
        aScript.onload = () => {

        };
    }
};

예를 들어 모듈에 브라우저에서만 작동하는 라이브러리가 포함되어 있는 경우.경우에 따라서는 동적 Import로 이 문제를 해결할 수 있습니다.

다음의 예를 참조해 주세요.

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

나에게 이 오류는 많은 실수로부터 발생한다: 먼저, 당신은 그것을 사용해야 한다.

if (typeof window !== "undefined") {

모든 것에 대해서window.그리고.document.특히나localStorage.functions (본인이 localStorage.getItem에 대해 이 if 구를 사용하는 것을 잊어버려서 오류가 수정되지 않았습니다)

또 다른 문제는 완전히 잘못된 아래의 라인을 수입한 것입니다.

import {router} from "next/client";

Next.js의 문서에 액세스하려면 먼저 페이지 렌더링을 기다린 후 다음과 같이 변수로 가져와야 합니다.

const [_document, set_document] = React.useState(null)

React.useEffect(() => {
    set_document(document)
}, [])

node.js의 JS와 브라우저의 JS의 차이를 읽어야 합니다.node.js에는 DOM API(window, document, document.getElementById,...)가 없습니다.HTML이 브라우저의 window라고 불리는 것으로 렌더링 되어 있는 경우에만 사용할 수 있습니다.따라서 next.js는 node.js를 사용하여 JS 코드를 실행하고 결과를 가져와 HTML 파일을 렌더링합니다.그러나 node.js에서는 브라우저 창이 표시되지 않습니다.

저는 영어를 잘 못해요.하지만 이 답변이 당신에게 도움이 되길 바랍니다.

srs를 실행 중지한 상태에서 동적 가져오기라는 새 기능을 사용할 수 있습니다.컴포넌트를 재렌더하기 위한 회피책입니다.

두 가지 설정이 되어 있는지 확인해야 합니다.

1. DOM 렌더가 완료되었습니다.
2. 그런 다음 기능을 로드합니다.

1단계: create hook is mounted 이렇게 하면 DOM이 렌더링됩니다.

import React, {useEffect, useState} from 'react';

function RenderCompleted() {

    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true)

        return () => {
            setMounted(false)
        }
    });

    return mounted;
}

export default RenderCompleted;

내부 함수 지불 후크를 로드합니다.

import React, {useEffect} from "react";
import {Elements, StripeProvider} from 'react-stripe-elements';
import CheckoutForm from '../../components/Payment/CheckoutForm';
import { useRouter } from 'next/router';
import RenderCompleted from '../hooks/isMounted';

var stripe_load = () => {
    var aScript = document.createElement('script');
    aScript.type = 'text/javascript';
    aScript.src = " https://js.stripe.com/v3/";

    document.head.appendChild(aScript);
    aScript.onload = () => {

    };
};

function Payment({host}) {
    const[key,setKey] = useEffect('');

    //will help you on re-render or host changes

    useEffect(()=>{
        const key = host.includes('localhost') ? 'test' : 't';
        setKey(key);
    },[host])


    useEffect(() => {
      var aScript = document.createElement('script');
       aScript.type = 'text/javascript';
       aScript.src = " https://js.stripe.com/v3/";

       document.head.appendChild(aScript);
       aScript.onload = () => {

       };
    }, [isMounted])


    const router = useRouter();
    const isMounted = RenderCompleted();

    return (
        <div className="Payment Main">
            <StripeProvider apiKey={key}>
                <Elements>
                    <CheckoutForm planid={router.query.id}/>
                </Elements>
            </StripeProvider>
            <br/>
            <br/>
            <p>Powered by Stripe</p>
        </div>
    );
};


Payment.getInitialProps = async ctx => {
    return { host: ctx.req.headers.host }
};

export default Payment

또 다른 방법은 next.http://https://nextjs.org/docs/api-reference/next/head 의 헤드 컴포넌트를 사용하는 것입니다.

<Head>
        <title>My page title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      </Head>

이것은 다른 사람에게 도움이 될 수 있습니다.Material UI anchorEl이 true일 때 이 오류가 발생했습니다.

const [anchoeEl, setAnchorEl] = useState(null)

<Menu 
    anchorEl={anchorEl}  
    anchorOrigin={{
        vertical: "top"
        horizontal: "right"
    }}
/>

언급URL : https://stackoverflow.com/questions/60629258/next-js-document-is-not-defined