Swelljs is rendering duplicate paypal buttons

[Buupu]

I'm using swelljs to render a paypal payment button but I'm getting multiple buttons rendering despite only calling createElements once -

Here is the code I'm using -

useEffect(() => {
    SwellClient.payment.createElements({
      card: {
        elementId: "#card-element-id",
        options: {
          style: {
            base: {
              fontWeight: 500,
              fontSize: "16px",
            },
          },
        },
      },
      paypal: {
        elementId: "#paypal-button",
        style: {
          layout: "horizontal",
          label: "buynow",
          tagline: false,
        },
      },
    });
  }, []);

With <div id="paypal-button" /> as my HTML element.

Any help with this would be appreciated!

[ericingram]

Could useEffect be getting called twice? I don't think it clears an existing element so that would make sense.

[Buupu]

Only triggering once according to my logs. Weirdly enough, if I attach the function to an event instead then it doesn't duplicate the elements. Probably some hot reload issue I'd imagine.

Happy to close this.

[sags95]

@Buupu is StrictMode enabled by any chance?

[Buupu]

Yes, it is. Could that be the cause?

[PovilJ]

Got same problem

[rinorzek]

Same problem as well.