Cuando uso Stripe en Next.js y "construcción de hilo", aparece un error.

Durante el desarrollo local con yarn dev, funciona sin ningún error.

No puedo entender por qué sucede esto.

 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> ); };