#colonelcool_code
wise pineBOT
๐ 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/1344773486350172262
๐ Have more to share? Add more details, code, screenshots, videos, etc. below.
golden bay
Hello, and to be clear you get that error even if that component is the only one on your page?
fiery belfry
I've been trying to add the ConnectComponentProvider as a child component of a tab in my admin page
is that approach workable?
golden bay
Yes, it being a child component is intended, I was more trying to isolate what may be happening here. Like have you already tried rendering just this component, and does your page ever get this error when other components are put in the tabs of your admin page?
fiery belfry
if I comment out those three lines everything works, so I think it's isolated to the stripe components
basically, this works:
<div className="space-y-6">
{/* Payment content will go here */}
<Card className="shadow-lg">
<div className="text-gray-600">Payment Management Interface</div>
{/* <ConnectComponentsProvider connectInstance={stripeConnectInstance}>
<ConnectPayouts />
</ConnectComponentsProvider> */}
</Card>
</div>
);
``and this doesn't:
<div className="space-y-6">
{/* Payment content will go here */}
<Card className="shadow-lg">
<div className="text-gray-600">Payment Management Interface</div>
<ConnectComponentsProvider connectInstance={stripeConnectInstance}>
<ConnectPayouts />
</ConnectComponentsProvider>
</Card>
</div>
);```Gotcha, and can you show me how you are setting stripeConnectInstance?
fiery belfry
const fetchClientSecret = async () => {
// Fetch the AccountSession client secret
const response = await fetch(`${API_URL}/api/stripe/sessions/account`, {
method: "POST",
credentials: 'include',
headers: {
...headers,
"Authorization": `Bearer ${token}`,
},
// TODO - ACTUALLY GET THE ACCOUNT ID
body: JSON.stringify({ AccountId: 'acct_1QuykJCFNXBMWCkQ' }),
});
if (!response.ok) {
// Handle errors on the client side here
const { error } = await response.json();
console.error('An error occurred: ', error);
return undefined;
} else {
const { clientSecret } = await response.json();
return clientSecret;
}
}
return loadConnectAndInitialize({
// This is your test publishable API key.
publishableKey: "pk_test_51Qqfy9FpGEU74ULRyAmXiO0MvxlhWkbKTxZmST09XufP60JLCI02eErT4JLdbD31Htc1gmw8MrQElLAi7YrLTObp00Qp7RffZ1",
fetchClientSecret: fetchClientSecret,
})
});```this is mostly copied from the setup guide, the only change is to use an internal endpoint in the fetch to get the client secret
golden bay
Yep yep, looking at that doc myself now.
fiery belfry
and then here's the imports:
import {
ConnectPayouts,
ConnectComponentsProvider,
} from "@stripe/react-connect-js";```So one quick thing to double check. I see that we destructure the json response with const {client_secret: clientSecret} = await response.json(); but you have const { clientSecret } = await response.json();, that should be equivalent if your json has a key named clientSecret but would be null if you also return client_secret
fiery belfry
let me confirm, but I don't think there's an issue with the stripeConnectInstance, because when I log that it appears to be inialized:
{create: ฦ, update: ฦ, debugInstance: ฦ, logout: ฦ}
create
:
(tagName) => {โฆ}
debugInstance
:
() => { return stripeConnectInstance; }
logout
:
() => {โฆ}
update
:
(updateOptions) => {โฆ}
[[Prototype]]
:
Object```^the result of console.log(stripeConnectInstance)
fetchClientSecret should return just a string, correct?
golden bay
Yeah, so I am wondering if stripeConnectInstance being an object here is an issue. When I search this error earlier, the first result is a StackOverflow where the issue is that an object was passed where a string was expected
https://stackoverflow.com/questions/33117449/invariant-violation-objects-are-not-valid-as-a-react-child
Oh wait I misread that
fiery belfry
stripeConnectInstance here is the of the type returned by loadConnectAndInitialize, which is a StripeConnectInstance
golden bay
That return is part of fetchClientSecret which at this point is expected to just passed into loadConnectAndInitialize
I'm going to try to reproduce this, in the meantime I do think it would be helpful to try to render a page that is just this connect component. Sometimes there can be obscure environmental errors, and it can be helpful to rule those out
fiery belfry
will do
to be clear, in theory I shouldn't have to include the ConnectComponentsProvider at the App.jsx level, right? I'd like to avoid doing that because I want this to only come into play inside our internal admin page
golden bay
Yeah as long as the ConnectPayouts is wrapped by the ConnectComponentsProvider you should be good
fiery belfry
I've blanked the page out more or less and I'm still seeing the issue:
<PrivateRoute requireActive={false}>
<Admin />
</PrivateRoute>
} />```
this is the route to the admin page, and then `<Admin />` is just:
``` return (
<>
<span>test</span>
<ConnectComponentsProvider connectInstance={stripeConnectInstance}>
<ConnectPayouts />
</ConnectComponentsProvider>
</>
);```and it's the same thing, where if I comment out the stripe components, it renders without error
oh wait one sec let me try that again
nope same problem, just had an unrelated typo
golden bay
Gotcha, I am reaching out to a colleague that knows more about react and will get back with what I hear from them
fiery belfry
ok great thanks
tawdry socket
๐ can you share the Connected Account ID that you are creating this Session for?
wise pineBOT
tawdry socket
Have you tried to render any other Embedded Component?
fiery belfry
I need the provider regardless of what component I'm rendering right?
tawdry socket
Yep you would just change the components when you create your Account Session
And then use the relevant component on the frontend
fiery belfry
I can't even render a test span inside that provider
<span>test</span>
{/* <ConnectPayouts /> */}
</ConnectComponentsProvider>```
like even this doesn't workYeah you shouldn't be able to do that
Or wait
You are saying you see the same error
fiery belfry
same error
tawdry socket
Gotcha, one sec
fiery belfry
I'll try some other components in the meantime
tawdry socket
That'd be great
This is inside your Admin component?
How are you rendering the component that the ConnectComponentsProvider is within?
fiery belfry
same issue with ConnectPayments
<PrivateRoute requireActive={false}>
<Admin />
</PrivateRoute>
} />```
right now this is the only component in `<Admin />`the ConnectComponentsProvider I mean, is the top-level component of <Admin />
tawdry socket
Are you doing this locally or is there a page that I could visit to poke at this?
fiery belfry
I'm doing it locally right now
I could set something up but it might take a little while
fiery belfry
yeah can do
tawdry socket
Your code seems totally fine to me
Works fine in my sample
I created a test account in the same manner you did
So I'm a bit stumped ๐ฆ
fiery belfry
we've all been there
appreciate the help
let me try and take this outside of react router quickly
tawdry socket
Hmm also you are passing the payouts component in your Account Session request?
I would expect a different error if you weren't
But looking at all your recent Account Session requests (even from more than 15 mins ago) are just the payments component
Unless I'm just not looking far enough back?
fiery belfry
hang on lemme look
you're right about that I think this is just configured for payments (the guy who set it up is on vacation today)
but even when I replace the Payouts component with <ConnectPayments /> it still has the same issue
so now I'm outside of react-router, and I'm using this:
<ConnectPayments />
</ConnectComponentsProvider>```
and I'm still seeing the same problem ๐ฆyeah I'm stumped, I've deleted all the other context providers and everything, still the same problem
well I appreciate the help, I was hoping it was something you'd seen before, but if it's not I don't need to tie you up any longer today
tawdry socket
Do you have strict mode enabled?
tawdry socket
What version of connect-js and react-connect-js do you have installed?
fiery belfry
"dependencies": {
"@stripe/connect-js": "^3.3.21",
"@stripe/react-connect-js": "^3.3.21"
}
}```I was just a few minor versions back but just upgraded my sample and still works fine
fiery belfry
oh hang on, lemme try something
oh man am I stupid
so sorry for wasting your time like this
it works now
fiery belfry
when I ran the initial npm install --save @stripe/connect-js @stripe/react-connect-js, I was one level too high in the file tree
tawdry socket
Ah!
fiery belfry
so I never had the package installed at the level I needed
tawdry socket
What a strange error for that being the case...
fiery belfry
you did solve the issue for me though!
tawdry socket
๐
fiery belfry
the only reason I realized what happened is when I checked the version I noticed that it was the only package listed in the package json
I had created a completely separate package json one level higher and that was the giveaway
well thanks a million, glad to get this sorted out
tawdry socket
Glad you figured it out!