當我使用 Next.js 加載 Stripe 並發生構建錯誤時

Question

當我在 Next.js 和“yarn build”中使用 Stripe 時，出現錯誤。

在使用 yarn dev 進行本地開發期間，它可以正常運行。

我不明白為什么會這樣。

 function CheckoutForm(props) {
  const [redirect, setRedirect] = useState('true');
  const { bodyAdquire } = useAppContext();
  const router = useRouter();

  let teamName = process.env.NEXT_PUBLIC_TEAM_NAME

  let handleSubmit = async (event) => {
    event.preventDefault();


    const { stripe, elements } = props;
    if (!stripe || !elements) {
      return;
    }

    const card = elements.getElement(CardElement);
    let tokenId
    const result = await stripe.createToken(card);
    if (result.error) {
    } else {
      tokenId = result.token.id
    }

    
    const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
    const Checkout = () => {
      const {bodyAdquire} = useAppContext()
      return (
        <div className={Styles.App}>
          <div className={Styles.product}>
            <div>
              <Elements stripe={stripePromise}>
                <CheckoutForm tokens={bodyAdquire.tokens}/>
              </Elements>
            </div>
          </div>
        </div>
      );
    };

Answer 1

我通過刪除不屬於頁面的組件並僅在下一頁中保留索引文件來解決它。 確保將所有非頁面移出頁面文件夾。