#_illegal_.
1 messages · Page 1 of 1 (latest)
Hi there
Sounds like there is some sort of issue with your import of the Stripe.JS library.
How are you importing it currently?
import { loadStripe } from '@stripe/stripe-js'
const [stripePromise, setStripePromise] = useState(null)
const { error, data } = await dispatch(fetchConfigDetails({ appType }))
setStripePromise(loadStripe(data.publishableKey))
These are the functions that will be called
Can you try just doing a full reboot of your server/client
I tried it several times.
To point out, we are having a monorepo so for one app I am not facing the error but for other app facing the error.
Have you tried in incognito mode? Seems like something on your client is blocking the loading of Stripe.JS
Hmm sorry not sure what to say. This is a local problem -- not an issue with Stripe.JS. So I'm not really sure what the issue is with your local environment but I won't be able to help much here.
is there any URL that on which loadStripe works particularly?
Or is it generic
Yeah
"Error: Failed to load Stripe.js\n at HTMLScriptElement.eval (webpack-internal:///../../node_modules/@stripe/stripe-js/dist/stripe.esm.js:91:16)"
I tried loading the promise and this was the call stack
Yeah I mean you can look at https://github.com/stripe/stripe-js/issues/26 for instance where this is described to be some sort of CSP block or an extension
But the port doesn't matter here
I'd try including the script tag and see if that changes anything: https://github.com/stripe/stripe-js#manually-include-the-script-tag
The pure component didnt work
@lament wasp
Even if I am just trying to import
import { loadStripe } from '@stripe/stripe-js'
I face the error
Yeah so we are back to what I said earlier... unfortunately there is some issue with your local environment in terms of loading Stripe.JS
Something is blocking it
I don't know what and can't really help you debug that unfortunately
GET https://js.stripe.com/v3 net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200
Can this help?
Oh yeah that seems like a CSP issue.
Not sure what exactly it means.
Can you tell if its local or global can can this be resolved?
We have on our sever from where we fetch the keys, but how is loadStripe related to that?
Hmm yeah that's fair... it actually shouldn't really matter for just loading Stripe.JS. 🤔
Also, in out backend server we have given whiteacess to these URLS as the requests are completely working fine
on port 3430, it is not working.
on port 4000 and 3434, I am able to load the components
Not sure what exactly is blocking the loadStripe promise
So it is only not working on 3430?
Trying to run app on some different port for now to check if issue is with app or port
Facing issue on different port also
I'm not sure this really have anything to do with Stripe specifically, since it seems to be your app blocking the request to load stripe.js in the first place
This error suggests you might be using Cross-Origin-Embedder-Policy (COEP), which Stripe.js does not support
I have asked whether we are using the above in our codebase
in the app, we do suport this
If you're using that then you'll need to disable it or add exceptions for stripe.js resource somehow, but I'm not familiar with this policy in detail
I have disabled it for testing. Will have a look on other methods though.
Thanks for the help