#ezarowny_stripejs-webpack-blocking

1 messages · Page 1 of 1 (latest)

fallen riverBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1291762641697771592

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

mossy spruce
#

Can you intermittently replicate?

outer dove
#

Ah here we go

#

I can consistently replicate there

#

Oh

#

Maybe it's Osano

#

Might not be you guys

#

Doesn't track why it would only be Firefox yet

#

It looks like the Script is loading so I don't think it's Osano

#

Yeah it works fine in Chrome and Safari

mossy spruce
#

I'm able to load the payment page in Firefox

outer dove
#

A loooooot of folks aren't able to

#

And it's only Firefox

#

Across many operating systems

#

Well, the page loads but you won't be able to check out on the second step since Stripe didn't load

mossy spruce
#

If the credit card form shows, then stripe.js loaded successfully

#

Stripe.js is what's used to load that form

outer dove
#

I can tell you that it doesn't work because we get customers stating so and I can reproduce it here

mossy spruce
#

I submitted test card data and got an error that i submitted known test card data

#

So it's talking to stripe correctly

#

I just tried in firefox and it worked fine. What version of firefox are you using?

outer dove
#

Latest (131)

mossy spruce
#

You can repro in the latest version?

outer dove
#

Yes

#

Last 5 errors in Rollbar from customers are all from 131 too

#

I commented on here a while ago but it got closed as stale

#

I'll post in there again but open source is a process and I don't want to add too much noise there

mossy spruce
#

Ok weird that I can't repro in 131

#

I'm on MacOS

outer dove
#

Same

#

Apple Silicon Mac here

mossy spruce
#

Yes same

#

Hm

outer dove
#

But I see the error across operating systems if Rollbar is to be believed (and I do believe them)

#

I don't think we're doing anything particularly interesting. The code sample I listed is where we load Stripe; it's pretty boring.

#

Let me see if this happens on staging ...

#

We have less strict protections there

#

Does the stripe-js library load scripts from different locations based on browser? That seems like a very weird to do but 🤷‍♂️

prisma hatch
#

Hi there 👋 jumping in as my teammate needs to step away soon.

outer dove
#

You know what, I don't think I can replicate this on staging

#

Maybe it is Osano but Osano only filters on pre-approved URLs

#

Heyo

#

Let me confirm another thing ...

#

Yeah okay it seems that it's only on production

#

Which does have something called Osano which handles blocking unapproved scripts and cookie compliance, etc

#

But I've never seen errors only in Firefox from it before

#

Assuming that's what is happening

#

Reading the stripe-js source I guess ...

#

Ha, now I'm not experiencing it on production. Fun!

#

It does seem a bit intermittent.

prisma hatch
#

Hm, it's loading consistently for me.

outer dove
#

This is wild man

#

We do include Stripe on every page already for fraud detection reasons 🤔

#

Hasn't been a problem before

#

Well, most pages

#

This page has it in the head before we even get to running JS though

prisma hatch
#

Maybe I don't understand the problem fully. What should I be looking for in trying to replicate this? Does the Stripe element not load, is it unresponsive, something else?

outer dove
#

So, when this error occurs, the page will seem fine until you get to the second step of checkout where we actually show the Stripe inputs

#

They will not work

#

We load a facsimile of the Stripe inputs in first

#

Those never get replaced/mounted since Stripe never loads

prisma hatch
#

Oh, maybe I have been seeing this then, didn't realize what I was looking for.

outer dove
#

Do you see the error in your browser dev tools console?

#

You should see it as the page loads even in the first step

prisma hatch
#

Gotta try to get back to that state, the dev console locked up

#

Hm, now the fields are always responsive

outer dove
#

You don't need to advance the checkout page

#

You don't even need to type or click on anything

#

I get it frequently as the page loads

#

Something about resolving the Promise in stripe-js in Firefox is bad

#

I wonder if it happens on other checkout pages ...

prisma hatch
#

I see that error is being thrown by this check in your code, I think:

  return function () {
    if (window.Stripe) {
      resolve(window.Stripe);
    } else {
      reject(new Error('Stripe.js not available'));
    }
  };
};```
outer dove
#

Ah yes, yes it does

#

That code is from the Stripe JavaScript library

#

I looked at a different checkout page of ours that is much simpler and it also throws the error in Firefox

prisma hatch
#

I've not seen that check before, can you point me to where you saw a suggestion to use that?

outer dove
#

I'm not directly calling that

#

Take a look at the code at the beginning of this thread

#

I'm just awaiting loadStripe

prisma hatch
#

Oh I see, I read the file stack incorreclty 😅

outer dove
#

Yeah it's a weird error because it's so short

prisma hatch
#

Checking with a teammate to see if they may have a sense of what is going on here.

#

While I do, can you clarity what version of stripe-js you're leveraging currently?

outer dove
#

Sure, let's see ...

#

package-lock.json says "@stripe/stripe-js": "^4.5.0"

haughty sparrow
#

The fact that the stack trace includes osano suggests something else is happening here. What is that? Can you reproduce this without that?

#

Like this looks like your packages aren't being loaded, it seems like something is trying to dynamically load packages

#

Looking all the way back at your original message:

Error is at `onLoad(webpack://eljs/./node_modules/@stripe/stripe-js/dist/index.mjs:61:14)`

this looks like a problem loading the package, rather than within the package

haughty sparrow
#

The default implementation loads this automatically as a sideeffect of importing loadStripe

#

One thing you could try is the /pure pattern, which defers loading Stripe.js until you call loadStripe

#

But if you use another tool here that potentially blocks resource then you might need to set up an exemption or something for Stripe.js.

fallen riverBOT