Uncaught (in promise) Error: Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`

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