未捕获（承诺）错误：提供给 `Elements` 的道具 `stripe` 无效。 我们建议使用来自 `@stripe/stripe-js` 的 `loadStripe` 实用程序

Question

I'm SO frustrated. I'm literally implementing straight from the Stripe Docs, and I keep getting the error

Error: Invalid prop 'stripe' supplied to 'Elements'. We recommend using the 'loadStripe' utility from '@stripe/stripe-js'

... but I am! What is wrong with this script? I've searched everywhere, and can not find any reason why I'm getting this error.

import React from "react"
import PropTypes from "prop-types"
import {loadStripe} from '@stripe/stripe-js';
import {CardElement, Elements, useElements, useStripe} from '@stripe/react-stripe-js';

const stripePromise = loadStripe('pk_test_yesItsMyRealKey')

class MembershipCheckout extends 

React.Component {
  render() {
    return(
        <Elements stripe={stripePromise}>
        </Elements>
    )
  }
}


export default MembershipCheckout;

package.json

"@stripe/react-stripe-js": "^1.1.2",
"@stripe/stripe-js": "^1.11.0",

Not sure if it matters, but i'm using Rails 6, with react-rails and webpacker

Answer 1

Please check if you have loaded the stripe script from your index.html. if so, please remove it. The method you use works for react library only and creates incompatibility if you load another Stripe library via index.html.

Answer 2

Wow I'm a freaking moron. I still had <script type="text/javascript" src="https://js.stripe.com/v2/"></script>

in my app layout header, which is what was causing this error. This error message is misleading. This link helped me realize that