5
Duplicate Members
complete
Activity
Newest
Oldest
Duncan Hamra
complete
✅ Fixed
Tyler Bell
Fixed!
Isaac Durand
Josh Lopez: I've seen this issue in conjunction with
MemberStack.reload
.Context:
My site uses Next.js, so navigating to the signup page does not trigger a full page reload. Looking at the Help Center, I saw that calling
MemberStack.reload()
could fix this issue: https://help.memberstack.com/en/articles/3850012-front-end-api.Now, when a user clicks the “Sign up” button, I programmatically call
MemberStack.reload()
and submit the form (which is identified with a data-ms-form="signup"
attribute).Expected behavior:
When a user clicks the “Sign up” button, the browser should make a POST request to
https://api.memberstack.io/member/signup
.Actual behavior:
The browser makes two or three POST requests to that URL.
It seems that the more times I’ve called
MemberStack.reload()
, the more POST requests occur. For example, when I called MemberStack.reload()
three times from the Chrome Dev Tools console and then clicked “Sign up”, my browser made 11 POST requests. Six members were created, and the other five requests failed.Isaac Durand
In my case, the user is still able to log in, but multiple members are created, which is not ideal. The root cause seems to be a proliferation of event listeners, as shown in this Loom video: https://www.loom.com/share/d9567726bf9543a081e8306f331653d5.
What can I do to ensure that the signup endpoint is called only once? Is it possible to update the
MemberStack.reload
method to remove any existing event listeners on the signup form before adding a new one?Isaac Durand
In case it's helpful to others, I'll describe the workaround I implemented.
I removed my custom Memberstack signup form (identified with a
data-ms-form="signup"
attribute) from the page and added a new "placeholder" signup form. When the placeholder form is submitted, it...- Unmounts any existing Memberstack signup form (identified with a data-ms-form="signup"attribute) usingReactDOM.unmountComponentAtNode. (The goal here is to get rid of unwanted event listeners.)
- Copies the values from the placeholder form into a fresh Memberstack signup form and attaches that form to the DOM using ReactDOM.render.
- Calls MemberStack.reload().
- Programmatically submits the fresh Memberstack signup form.
This solution seems to work, but using a single form would be preferable.
Duncan Hamra
Have we been able to replicate this in one of our test sites?
Josh Lopez
Duncan Hamra: No, this is the first time I have seen it. Came from a community member and I talked to Tyler about it.