Stripe `AddressElement` is undefined - reactjs

I am using stripe to receive payments and I am following this guide to get the address of the my buyers, but the guide seems to be wrong wrong:
when importing import {AddressElement} from '#stripe/react-stripe-js';, the library doesnt seem to have the AddressElement anywhere in there (I also searched manually for it) and AddressElement is undefined
Do you any idea if the guide is actually wrong?

Instead of using
AddressElement
Stripe now provides a
BillingAddressFields
component that you can use to collect a customer's billing address.

The problem was easy to solve - I had an older version of #stripe/react-stripe-js. Installing the latest one solved the issue

Related

FormContext returns 'null' inside SimpleForm on local

Hoping someone can point me in the right direction to try to debug this issue.
I'm refactoring an application built with react-admin to version 4.0.0.beta-3. But none of my custom forms are working correctly. Namely, when I call any of the new react-hook-form methods, like "useFormContext", I get back null. When I try to get the form values using "useWatch", I get back an error saying 'Cannot read properties of null (reading 'control')'
According to react-hook-form's docs, this may indicate that the element is not being provided with FormContext. However, when I built a codesandbox to verify the issue, useWatch works correctly and returns the form values. (Here is that codesandbox: https://codesandbox.io/s/crazy-violet-qk7uyh?file=/src/test-resource/TestResourceCreate.tsx )
If I copy the code nearly line-for-line into my local environment, it breaks, looking for "control" when I call useWatch.
I've tried deleting node_modules and reinstalling, I've installed react-hook-form at 7.27.0 (the stated version react-admin is using), but I have not found a solution.
Any suggestions for what to do/try next, or what could be wrong with my local, would be very much appreciated. Thanks!
EDIT: As an addendum: When I use the react-admin form component "FormDataConsumer", the form values are correctly passed in the prop "formData".
Answering my own question for posterity:
After refactoring my application to avoid having to flag --legacy-peer-deps on running "npm install", I was able to use useFormContext and all other react-hook-form methods as expected inside my react-admin custom forms.
The only package I'm aware of that required a legacy peer dependency was installing React at 16.9.0 while the rest of my application relied on 17.0.2. I'm unsure if that was source of my issue or if some other legacy peer was being installed that resulted in an incorrect import somewhere else. If anyone with more experience wants to share some insight into what could have been occurring to as to helper future searchers, be my guest.

Pl upload library reference

I am working on some POC or code where in I am trying to integrate Pl upload to my react application.
I found very good example -
This one is very good, wrapper for listening all the events from Pl upload library.
https://github.com/lemonCMS/react-plupload
I could integrate it fine, however I noticed linking of Pl upload happened in the index.html file (Which is not ideal way.).
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/plupload/3.1.2/plupload.full.min.js' async></script>
Need some input, how can I link same library coping inside my project directory.
So here basically I am expecting window.plupload should be initialized fine on load.
Another example I really liked is, as this will maintain state in the redux store and I hope I can navigate accross application with upload stays in progress.
https://www.npmjs.com/package/redux-plupload
However for second example as well, need some input about linking.
Also, please suggest if i am missing anything.
Thank you all.
I have figured out, I had to install, below package.
https://www.npmjs.com/package/plupload
This is not latest version, but will solve my purpose.
Thank you!

when using feathers express, it gives page not found error #2355

I'm intergrating feathers js both on backend and frontend and I got page not found error when I tried this implementation. I would appreciate your help. thanks for the awesome work!
code
https://github.com/react-boilerplate/react-boilerplate/issues/2355
This is the same problem discussed in this FAQ.
Just like in Express itself, the order of middleware matters. If you
registered a custom middleware outside of the generator, you have to
make sure that it runs before the notFound() error midlleware.
This means that
app.use(express.notFound());
Always has to be the last app.use call.

AdalJs acquireToken fails with invalid state error

My adaljs code to fetch a token for a web api is suddenly failing. This has been working for months now. Since yesterday, I get the following error.
Invalid_state. state: 7ea40a81-5491-47a1-8ebc-89488acb673a|https://sykesenterprises.onmicrosoft.com/MyAPI
This happens when the acquireToken method is called.
I am using the example from https://blog.mastykarz.nl/building-office-365-web-applications-react/ to use react with adaljs.
Managed to sort this out. If anyone else has the same issue, the answer was to just call adal.handleWindowCallback() at the entry point to the application.
The issue occurs because the sample you are referring to needs to be updated as per the latest version of Adal 1.0.16. I was able to fork the repo and submit a pull request to the owner to fix the invalid_state issue. Please refer to the link below to see the code changes:
https://github.com/waldekmastykarz/office-mygroups-react/pull/3/files

Map Component deprecated in Codename One

I'm facing some challenge in using maps, my map component is deprecated, is there something I should do to be able to use it and also would like to know the steps required to intergrate map keys to Codename One?
MapComponent is marked deprecated to discourage its use, but it should still work fine. The reason we discourage its use is because the Google Maps lib is better than it in almost every way. You should look at using that instead if possible.
There are instructions in the readme file on how to integrate your keys.
The Google maps library is updated with improvments please go throgh the below link.
new update n google map
you have added it from build hints as shown in as attached image.

Resources