How can I fix the Uncaught runtime errors?

Question

I get

Uncaught runtime errors:
×
ERROR
Script error.
handleError@http://localhost:3000/static/js/bundle.js:106227:67
@http://localhost:3000/static/js/bundle.js:106246:18

errors when I try to add stripe to my code. I couldn't fix it for like hours. This is my code down below:

import React from "react";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import OrderCartPayment from "./OrderCartPayment";


const stripePromise = loadStripe(
  process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY ||
    "my_stripe_pk"
);


stripePromise.catch((error) => {
  console.error("Stripe initialization error:", error);
});

const PaymentPageWrapper: React.FC = () => {
  try {
    return (
      <Elements stripe={stripePromise}>
        <OrderCartPayment />
      </Elements>
    );
  } catch (error) {
    console.error("Error rendering payment page:", error);
    return <p>Failed to load the payment page. Please try again later.</p>;
  }
};

export default PaymentPageWrapper;

I have been trying multiple codes but they don't work at all. It all comes to the same end.