当我使用 Next.js 加载 Stripe 并发生构建错误时

Question

When I use Stripe in Next.js and "yarn build", I get an error.

During local development with yarn dev, it works without any error.

i cant understand why this is happen.

 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

I solved it by removing the components that were not part of the page and leaving only the index file inside the next page. Make sure to move any non-pages out of the pages folder.