TypeError: element.setConnector is not a function

[ljrahn]

Hi currently having an issue when executing loadConnectAndInitialize in NextJS development server. Looks like line 155 in src/shared.ts. Any help would be appreciated. Yes it is just the development server, but none the less, still a little annoying.

Error: TypeError: element.setConnector is not a function

Code:

export default function AccountOnboardingUI({ marketplace }: StripeAccountOnboardingProps) {
  const [stripeConnectInstance] = useState(() => {
    const fetchClientSecret = async () => {
      try {
        const response = await accountSession(marketplace.id);
        const { clientSecret } = await response.json();
        return clientSecret;
      } catch (error) {
        showErrorNotification(error, { title: "Account Session Error" });
      }
    };

    return loadConnectAndInitialize({
      publishableKey: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!,
      fetchClientSecret: fetchClientSecret,
    });
  });

  return (
    <ConnectComponentsProvider connectInstance={stripeConnectInstance}>
      <ConnectAccountOnboarding
        onExit={() => {}}
        skipTermsOfServiceCollection={false}
        collectionOptions={{
          fields: "eventually_due",
          futureRequirements: "include",
        }}
      />
    </ConnectComponentsProvider>
  );
}

[jojo-stripe]

Are there any console errors or network errors? I ran a quick NextJs app from https://stripe.com/docs/connect/connect-embedded-components/quickstart and am not running into this error.

This error occurs if an HTML element is not being created, so I suspect earlier on in the stack you ran into an issue, like with creating an account session for example

[ljrahn]

I threw a console log after after my getter, and im definitely getting the secret without any network errors. I know in next dev, components mount twice, so it actually performs 2 network requests (in turn printing 2 client secrets), not sure if this has anything to do with it? Also the error is getting thrown, before the secret is returned, is that right? Note that it only occurs on a fresh refresh, but if it unmounts and remounts, the error doesnt throw.

[DuldR]

We're seeing the same thing on our end. Background for us is we're using Phoenix LiveView which also does two network requests. I've attached an image of a break point within the connect.esm.js file and after the function is called:

Breakpoint:

From the above, for some reason, we're seeing 2 element variables. Maybe related to the two requests?

and after resuming:

Not sure of the solution currently. I will say though the older API version 2.0.5 works for us with no issues.

Thank you guys for all the effort you've put into this package though!

[jorgea-stripe]

@ljrahn @DuldR thank you for reporting this. Is there any way you could share a minimal repro with us, perhaps a small repository that we could clone and reproduce the issue in? Since we haven't been able to repro in our quickstart nextjs development: https://stripe.com/docs/connect/connect-embedded-components/quickstart, I suspect something else (perhaps different package versions) is at play here

[ljrahn]

Ya no problem. reproduced here.

https://github.com/ljrahn/stripe-set-connector-bug

[jojo-stripe]

hey @ljrahn , thanks for sending an example over! I'll be taking a look at this and will get back to you by the next week or so

[bjermeland]

I'm also experiencing the same issue, is there any news here?

[jojo-stripe]

@bjermeland Are you also experiencing this in test?

[bjermeland]

@bjermeland Are you also experiencing this in test?

Yes. Next 14 with App Router. Basic setup with Stripe component.

Code:

import {
  StripeConnectInstance,
  loadConnectAndInitialize
} from '@stripe/connect-js/pure';
import { ConnectComponentsProvider } from '@stripe/react-connect-js';
import { useState, useEffect } from 'react';
import { Loading } from '../Loading/Loader';
import { useAccountSession } from '@/network/users';

export function ConnectComponents({ children }: { children: React.ReactNode }) {
  const { data: accountSession } = useAccountSession();
  const [stripeConnectInstance, setStripeConnectInstance] = useState<
    StripeConnectInstance | undefined
  >(undefined);

  useEffect(() => {
    if (accountSession?.client_secret && !stripeConnectInstance) {
      const instance = loadConnectAndInitialize({
        publishableKey: '',
        fetchClientSecret: () =>
          Promise.resolve(accountSession.client_secret ?? ''),
        fonts: [
          {
            family: 'Inter',
            src: "url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap') format('woff2')"
          }
        ],
        appearance: {
          overlays: 'dialog',
          variables: {
            fontFamily: 'Inter',
            colorPrimary: '#7950F2'
          }
        }
      });

      setStripeConnectInstance(instance);
    }
  }, [accountSession?.client_secret]);

  if (!stripeConnectInstance) {
    return <Loading />;
  }

  return (
    <ConnectComponentsProvider connectInstance={stripeConnectInstance}>
      {children}
    </ConnectComponentsProvider>
  );
}

[robatmac]

I have the same issue using react 18. If I disable the StrictMode I don't have it.

[icon2341]

I have this issue using Nextjs 14.1.2.

'use client';
import {useEffect, useState} from "react";
import {loadConnectAndInitialize} from '@stripe/connect-js'
import {
    ConnectPayments,
    ConnectComponentsProvider,
} from "@stripe/react-connect-js";
// '/api/stripe/account_session'

export default function TransactionsList() {
    const [isLoading, setIsLoading] = useState(true);

    const [stripeConnectInstance] = useState(() => {

        const fetchClientSecret = async () => {
            const acountId = 'SOME ACCOUNT';

            // Fetch the AccountSession client secret
            const response = await fetch('/api/stripe/account_session', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ accountId: 'SOME ACCOUNT' })
            });
            if (!response.ok) {
                // Handle errors on the client side here
                const {error} = await response.json();
                console.log('An error occurred: ', error);
                return undefined;
            } else {
                const {client_secret: clientSecret} = await response.json();
                return clientSecret;
            }
        }

        setIsLoading(false)

        return loadConnectAndInitialize({
            publishableKey: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
            fetchClientSecret: fetchClientSecret,
            appearance: {
                overlays: 'dialog',
                variables: {
                    colorPrimary: '#625afa',
                },
            },
        })
    });

    if(isLoading) {
        return <div className={"text-4xl"}>Loading...</div>

    }

    return (
        <div>
            <div className="container">
                <ConnectComponentsProvider connectInstance={stripeConnectInstance}>
                    <ConnectPayments />
                </ConnectComponentsProvider>
            </div>
        </div>
    )
}

[HunterWhiteDev]

I am experiencing this issue as well.

NextJS version 14.1.2

[jorgea-stripe]

Does reactStrictMode: false https://nextjs.org/docs/pages/api-reference/next-config-js/reactStrictMode mitigate the issue? We heard a report from someone where it seemed to help them, wanted to see if this was the case here as well.

[HunterWhiteDev]

@jorgea-stripe yes, It did fixed my issue.

[jorgea-stripe]

For anyone running into this issue - the short term workaround is to set reactStrictMode: false https://nextjs.org/docs/pages/api-reference/next-config-js/reactStrictMode in your next config

[jorgea-stripe]

This has been fixed with https://github.com/stripe/connect-js/pull/106 - upgrade to 3.3.3 for "@stripe-internal/connect-js" and 3.3.4 for "@stripe-internal/react-connect-js" to get the fix. We'd appreciate if anyone could confirm here if the issue is fixed for you!

[jorgea-stripe]

Fixed with https://github.com/stripe/connect-js/pull/106

[goguda]

This has been fixed with #107 - upgrade to 3.3.3 for "@stripe-internal/connect-js" and 3.3.4 for "@stripe-internal/react-connect-js" to get the fix. We'd appreciate if anyone could confirm here if the issue is fixed for you!

Can confirm fixed in the latest version. Thank you!