React-stripe-elements: Uncaught (in promise) undefined

[harvey56]

Feature request or idea? Consider opening an
API review!

Summary

I have an implementation very similar to what you have in the demo > async rep.
When my component loads, the console shows (sometimes) the following error/warning message :

Uncaught (in promise) undefined

Other information

See here

[asolove-stripe]

Yikes, that's not a very helpful error message. Thanks for the report, @harvey56. Can you share more about what you changed relative to the async demo that is causing this to happen?

[ashatat]

I am facing the same error message, any luck on what it is about?

@harvey56
@asolove-stripe

[harvey56]

@ashatat No luck. It logs in the console, sometimes. Not on every loading. Loading the Stripe script works regardless, in my case (I don't use promises in my code). So does creating a new customer/plan/subscription etc... on Stripe.

I'm only worried about what it means. It seems to me the issue comes from the Stripe script.

The errors point to lines 1418, 1446, and 1514

@asolove-stripe

I mount an AsyncStripeProvider wrapper component that is in charge of loading the stripe script (as documented here : https://gist.github.com/mrcoles/8c79595f488f0e334e528163feb23293).

I then add the Elements and MyForm children components as follows :

<AsyncStripeProvider apiKey={process.env.REACT_APP_STRIPE_KEY}>   
  <Elements>
    <MyForm />                              
  </Elements>
</AsyncStripeProvider>

[markgarbers]

I've come across the same issue... I've been able to consistently replicate it by throttling the connection speed of my browser, that makes the error occur every time.

[stevez86]

I'm also getting this issue. I notice it when I test on slow internet connections and not on faster ones

the error points to the line that starts with 'o.default':

                  , u = n(8)
                  , s = n(7)
                  , c = function(e) {
                    var t = u.win.opener || u.win.parent || u.win;
                    if (t)
                        try {
                            t.postMessage(JSON.stringify({
                                originatingScript: "m",
                                payload: e
                            }), "*")
                        } catch (e) {}
                }
                  , l = window.btoa || function(e) {
                    return e
                }
                  , f = function(e) {
                    var t = 1 < arguments.length && void 0 !== arguments[1] ? arguments[1] : function() {}
                    ;
                    return (0,
/* here--> */         o.default)(l(encodeURIComponent(JSON.stringify(e)))).then(t)
                }
            }
            , function(e, t, n) {
                "use strict";
                Object.defineProperty(t, "__esModule", {
                    value: !0
                }),
                t.default = function(i, a) {
                    var u = 2 < arguments.length && void 0 !== arguments[2] ? arguments[2] : "POST";
                    return new r.MPromise(function(t, n) {
                        var e, r = void 0;
                        r = void 0 !== s.win.XDomainRequest ? new s.win.XDomainRequest : new s.win.XMLHttpRequest;
                        try {
                            r.withCredentials = !0
                        } catch (e) {}
                        e = a || "https://m.stripe.com/4";
                        var o = setTimeout(function() {
                            n()
                        }, 2e3);
                        r.onreadystatechange = function() {
                            if (r.readyState === XMLHttpRequest.DONE && s.win.StripeM) {
                                clearTimeout(o);
                                var e = r.responseText;
                                200 === r.status ? (s.win.StripeM.__sid = e,
                                t(e)) : n()
                            }
                        }
                        ,

[markgarbers]

@asolove-stripe any joy in replicating the issue and/or issuing a fix?

This appears to be a bug in live code, which isn't ideal.

[andressakalil]

@asolove-stripe I also have the same problem when the internet connection is poor. Any updates on this one?

[ShenLanJohn]

same issue here also.
"Uncaught (in promise) undefined"

[sdarnell]

FYI I've seen this appearing recently on lots of sites, and despite trying to diagnose it in my own app, I now believe it is related to a browser plugin. The error even appears on stackoverflow.com, but if I disable the 'Office' chrome extension ver 2.1.0 (chrome://extensions/?id=ndjpnladcallmjemlbaebfadecfhkepb ) the problem goes away.

[markgarbers]

I don't use any Office extensions and still get the error on slow connections... so not sure it's related to a particular plugin.
Although it could be that the Office plugin is creating the conditions for the error to occur (e.g. slowing down the connection or doing something else that freaks Stripe out).

[BraulioBracamonte]

FYI I've seen this appearing recently on lots of sites, and despite trying to diagnose it in my own app, I now believe it is related to a browser plugin. The error even appears on stackoverflow.com, but if I disable the 'Office' chrome extension ver 2.1.0 (chrome://extensions/?id=ndjpnladcallmjemlbaebfadecfhkepb ) the problem goes away.

This worked for me

[rpaschal]

I don't use any Office extensions and still get the error on slow connections... so not sure it's related to a particular plugin.
Although it could be that the Office plugin is creating the conditions for the error to occur (e.g. slowing down the connection or doing something else that freaks Stripe out).

This worked for me as well.

[philipimperato]

This is still an issue for me for slow connections.

[sashko-stripe]

Closing this as this project has migrated to React Stripe.js as of early 2020, which also has a somewhat different API and implementation. If this still happens in the new library, please re-open it there.