React-stripe-elements: this.context.addElementsLoadListener is not a function

[tannerlinsley]

When following the quick start instructions from Stripes documentation, I'm getting this error in my app:

Element.js:77 Uncaught TypeError: this.context.addElementsLoadListener is not a function

I'm not totally sure, but my first guess is that this library is not compatible with the latest couple versions of React 16?

[iMerica]

This is happening to me too

[tannerlinsley]

Looks like the latest versions of React are not officially or stably supported by this library. I'm now using this instead: https://github.com/stripe/react-stripe-js

[mbarrett-stripe]

Hi @tannerlinsley - I want to check to make sure things are working as intended. This repository should work with React 16. I'm wondering if you could link me to the specific page you were following for setup? Was it the docs in this repo or on Stripe.com? A direct link would be helpful so I can run through as well and see if I hit the same issue. As of now, I'm not able to reproduce this error on React 16.12.0

[tannerlinsley]

I followed these instructions with a fresh install of create-react-app, standard template.

[mbarrett-stripe]

Oof - yeah those docs are out of date and we will change them ASAP. We're currently working on an overhaul of a lot of these docs and hope to clear up some of this soon.

In the meantime, you can follow this page for a working guide on getting things up and running. The README in this repo also has information on getting up-and-running with this codebase.

[tannerlinsley]

The main difference I see there is this:

export default injectStripe(CheckoutForm);

Are there any other main differences?

[mbarrett-stripe]

You'll need to use a <StripeProvider> context provider, as well as an <Elements> tag wrapping your use of Elements. injectStripe gets you the context from <StripeProvider>. More info on these components can be found in this section of the readme.

[mbarrett-stripe]

The docs have been updated to link to the same docs I mentioned here. More docs improvements (and others) are on the way. Closing this out for now.

[Eddie-CooRo]

Hey @mbarrett-stripe
I'm following the same steps you provided, but I'm still not able to run my application on [email protected]. So I think it's a good idea to reopen the issue.
Error is exactly the same as error that @tannerlinsley had.
I'm using [email protected], and I render the Provider in the gatsby-browser file in the wrapRootElement hook (which I also use for rendering auth0Provider and redux Provider)

Also, I found out that the line that is throwing the error is this one:
https://github.com/stripe/react-stripe-elements/blob/master/src/components/Element.js#L69
And when I try to access this.context in the line before this line, it is equal to this:

{addElementsLoadListener: undefined, registerElement: undefined, unregisterElement: undefined}