vividelites_unexpected

[sly tapir]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1220065931242242150

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[fossil yew]

Hi, can you confirm which Stripe Documentation you're using to build this?

[lean falcon]

I was originally following this https://docs.stripe.com/connect/get-started-connect-embedded-components#account-sessions

Then my terminal said ConnectJS won't load when rendering code in the server - it can only be loaded on a browser. This error is expected when loading ConnectJS in SSR environments, like NextJS. It will have no impact in the UI, however if you wish to avoid it, you can switch to the pure version of the connect.js loader: https://github.com/stripe/connect-js#importing-loadconnect-without-side-effects.

So I switched the import to the /pure path

[fossil yew]

Thank you. I'm getting help from a teammate who knows a bit more about Next.JS.

[lean falcon]

Awesome, thanks

[odd steeple]

Then my terminal said ConnectJS won't load..
Do you mean you were presented with an error that indicated this? Was the error coming from Connect.JS?

After you load the script, how does your app initialize it and when does that happen?

I think that even if you load using pure if your server render triggers the load/init sequence, the same problem exists

So you'd need to either:
1/ Ensure you defer the load/init until you know you're in the client env
2/ Force the component to be client-only so avoid SSR entirely

[lean falcon]

I already have 'use client' at the top of my file where I am loading this.

The error message I get in my nextjs terminal said before I switched it to using pure said

ConnectJS won't load when rendering code in the server - it can only be loaded on a browser. This error is expected when loading ConnectJS in SSR environments, like NextJS. It will have no impact in the UI, however if you wish to avoid it, you can switch to the pure version of the connect.js loader: https://github.com/stripe/connect-js#importing-loadconnect-without-side-effects.

[odd steeple]

Ah, interesting -- that seems confusing/unexpected then since its not meant to be SSR

Going back to the start, this looks like a TS error rather than runtime, right?

TypeError: element.setConnector is not a function

Does that provide a pointer to specific code?

Looking at the source there's only one use of setConnector: https://github.com/stripe/connect-js/blob/1dd5e7fbf73211c5f8bd03544e1f177e00c8ae15/src/shared.ts#L157

stripeConnectInstance.then(instance => {
        (element as any).setConnector((instance as any).connect);
      });

Actually there's an existing issue for exactly this: https://github.com/stripe/connect-js/issues/94

[lean falcon]

This is the error Im getting

Right now I have this code in the type level of my component

const instance = loadConnectAndInitialize({
    appearance: {
      // variables: { colorText: '#ffffff', colorBackground: '#242424' },
    },
    publishableKey: process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY as string,
    fetchClientSecret: async () => {
      const { id } = await getCompany(slug);

      const [response] = await invokeFunction('verify-stripe', {
        companyId: id.toString(),
      });
      return response?.clientSecret as string;
    },
  });

And then my function only returns this jsx

    <ConnectComponentsProvider connectInstance={instance}>
      <div
        style={{
          overflow: 'scroll',
          height: '100vh',
          color: 'white !important',
        }}
      >
        <ConnectAccountOnboarding
          onExit={() => setHideStripe(true)}
          collectionOptions={{
            fields: 'eventually_due',
            futureRequirements: 'include',
          }}
        />
      </div>
    </ConnectComponentsProvider>

[lean falcon]

Ahh I see, so do I just have to wait for a fix?

[odd steeple]

I think so, yes, but I'm reaching out to the team to see if they can share any updates 🙂

I would suggest sharing your experience with this in that issue both to bolster support for a fix and so you get updates there when they have them

[lean falcon]

Okay will do. I will have to postpone this part of my code till later