Next.js：文档未定义

Question

我正在尝试创建一个人们可以付款的付款表格，但我不断收到此错误。

文档未定义

我正在使用 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

原文由 Chris Hansen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为，在服务器渲染模式下，文档是未定义的。您应该能够在类生命周期方法或 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

原文由 san 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您需要使用验证器 --- 包装您的 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 = () => {

        };
    }
};

原文由 Darryl RN 发布，翻译遵循 CC BY-SA 4.0 许可协议