loading Stripe with React Stripe js fails with CORP error - reactjs

I am working on a react application that is using React Stripe package to connect to Stripe.
I am trying to use Stripe PaymentElement to gather card information. Everything works fine in development mode but when I build the code for production and I deploy it on a test server I get this errors in the browser console:
The resource at “https://js.stripe.com/v3” was blocked due to its Cross-Origin-Resource-Policy header (or lack thereof). See https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)#
How can I fix this error?

Related

Next.js - local build works fine, production build deployed to GCP w/ Cloud Run has Minified React errors

Newish to Next.js. I deployed a Next app to GCP with Cloud Run. The local build runs with with no errors or warnings but I'm getting Minified React errors 419 and 425 on production.
I looked at the full error message but I'm not sure how to debug my code since my local build works fine.
I'm grabbing half a dozen collections from a Firestore db in a getStaticProps() and subscribing to two collections with onSnapshot in a useEffect() hook.
Any thoughts?
I could try grabbing everything in a useEffect (ditching the getStaticProps) but that seemed like the place to do my data fetching since it's a simple SPA with static data that doesn't change much.
The 400s error that you have mentioned generally means that the client is not in the capacity to complete a request.
The error “419” Indicates that you're missing your CSRF token from your request; you may fix this by adding the token when it is generated in the headers token variable and without the CSRF-token the endpoint will return the 419 status response.
Next,the error “425” indicates that when using Server-Side Rendering (SSR) with a framework like NextJS, it is uses React hydration, which basically means React is figuring out how to take the DOM structure rendered from the HTML file and convert it into a running single-page app (SPA),for this to work correctly, React Hydration requires that the HTML from the server and what your client-side app renders are an EXACT match.
I would recommend you to rectify these in your source code and try to deploy the build again.
Also check out these links for more information and examples:
Error Decoder - 425
Error Decoder - 419
Error text content does not match
419 page expired CSRF token

Sitecore JSS (Headless) + React. Can not deploy app. Status: 403

I am trying to deploy my first react app.
I have followed all the steps according to the instructions.
But when it comes to app deployment I keep getting the same message.
Unexpected response from import status service. The import task is probably still running; check the Sitecore logs for details.
Status message:
Status: [403]
Can anyone help me with this?
Hosts added
Confings and the error
Api is working
please go through my comment on : 403 error when importing a new JSS app to Sitecore 10.2
also make sure your API key and layout service is configured properly e.g. http://myapp.siteco.re/sitecore/api/layout/render/jss?item=/&sc_apikey={YOUR_API_KEY_ID}
Similar kind of issue: 403 error when importing a new JSS app to Sitecore 10.2

Error while deploying react based SSR app, using firebase-functions

I am trying to deploy my SSR app in Firebase originally forked from, after doing some modification in the app.
Which works fine when I do sudo firebase serve --only functions,hosting but throwing error when I do firebase deploy.
The reproducible repo has a package.json.
I am using the public directory as my function directory as well.
However, even if I am using a different function directory for my cloud functions, I see the same errors.
Function failed on loading user code. Error message:
Code in file index.js can't be loaded. Is there a syntax error in your code?
Detailed stack trace: TypeError: c(...) is not a function
at Object.<anonymous> (/user_code/assets/app.server.js:1:28950)
at Object.module.exports.n (/user_code/assets/app.server.js:1:29283)
...
Functions deploy had errors.
To continue deploying other features (such as database), run:
firebase deploy --except functions
Error: Functions did not deploy properly.
It is possible, but you cannot serve static assets with cloud functions. You need a mix of firebase functions and firebase hosting.
The guys at Firebase already thought on this and you also have an implementation available.
Check the following documentation:
Overview
Dynamic Content
Code Example
Youtube Video
Note: There is a delay that you need to take into consideration when using cloud functions.
When a new instance handles its first request, the response time suffers, which is called a cold start
More info
The problem is that firebase hosting only supports SPAs, which means that SSR is out of the picture, you need to run your SSR server in a different env where you can run nextJS, or if you're using a static page generator you could upload the files directly compromising on the ability to refresh the content, although, I'm sure a solution with cloud functions and gatsby is feasable.
Tl;DR: You won't get SSR out of Firebase Hosting

ERROR: Firebase Database (${JSCORE_VERSION}) INTERNAL ASSERT FAILED: Reference.ts has not been loaded

I get error message when I am loading my Webapp with IE10 and below IE version.
I am building an my Webapp with React 15.4.0 and firebase 5.5.0.
I have tested the Webapp with Chrome, Firefox, IE11 and it's working fine.
Try to comment line below in file "firebase-js-sdk/src/database/api/Query.ts" may help you to solve this error.
assert(__referenceConstructor, 'Reference.ts has not been loaded');
Other work around are also available in link below that you can try to check.
Firebase Database (4.3.1) INTERNET ASSERT FAILED: Reference.ts has not been loaded.

Connection Error trying to use Stripe payments with React & Express

I'm trying to integrate Stripe payments into a React project.
I've essentially copied this: https://github.com/rwieruch/react-express-stripe
(but obviously put my own API keys in)...
The frontend seems to be working fine, but I'm getting this error when the payment declines:
"OPTIONS http://localhost:8080/ net::ERR_CONNECTION_REFUSED xhr.js:178"
Any ideas?
ANSWERED: I just needed to launch the app from the backend folder,
node index.js

Resources