jamielmccormick_error

[woven idol]

👋 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/1240498700472684594

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

[ocean cosmos]

Have you tried the "pure" version ? i.e., @stripe/connect-js/pure

[peak willow]

Ah that seems to have worked and cleared out that error – looks like I have another error in my apoplication (unrelated) that it was masking 😅

Hm okay, seems like it is back here's a screenshot from my Vercel error logs, and here's the component I am loading my Connect components in: ```'use client';

import { Card } from '@/components/ui/card';
import { loadConnectAndInitialize } from '@stripe/connect-js/pure';
import {
ConnectComponentsProvider,
ConnectPayments,
ConnectPayouts
} from '@stripe/react-connect-js';
import { useState } from 'react';
import { createAccountSession } from '../actions/account';

export default function Dashboard() {
const [stripeConnectInstance] = useState(() => {
const fetchClientSecret = async () => {
const data = await createAccountSession();
if (!data) {
throw new Error('Failed to create Stripe Connect instance');
}

  return data.client_secret;
};

return loadConnectAndInitialize({
  publishableKey: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!,
  fetchClientSecret: fetchClientSecret,
  appearance: {
    overlays: 'dialog',
    variables: {
      colorPrimary: '#133020',
      fontSizeBase: '16px',
      borderRadius: '8px',
      spacingUnit: '8px',
      formBorderRadius: '24px'
    }
  }
});

});

return (
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<ConnectComponentsProvider connectInstance={stripeConnectInstance}>
<Card className="p-6">
<ConnectPayouts />
</Card>
<Card className="p-6">
<ConnectPayments />
</Card>
</ConnectComponentsProvider>
</div>
);
}

[ocean cosmos]

Does the /account route correspond to Dashboard compoenet ?

[peak willow]

Yeah, my Dashboard component is a client component that I'm using in my /account page.tsx file

[ocean cosmos]

OK, can you search your project and see if there's any @stripe/connect-js/ imports?

[peak willow]

Yep! I have the notification banner as a seperate component that I am importing into that same page. I also have a seperate route, /onboarding, where I am also using the connect embedded onboarding component. I also have import '@stripe/connect-js/pure' in my root layout

[ocean cosmos]

Just to clarify, you only use '@stripe/connect-js/pure' in your project and you don't have any code that uses @stripe/connect-js

[peak willow]

Correct!

[ocean cosmos]

Ok, I read the error message again, and it looks like it says ConnectJS doesn't support SSR.

Using @stripe/connect-js/pure is just to suppress the error message

[peak willow]

Ohhhhhh yes! That's it. The fix was to add const DynamicDashboard = dynamic(() => import('./components/dashboard'), { ssr: false }); in my page route and then use that component