Receiving a very confusing slug on a server component
Unanswered
Chinese perch posted this in #help-forum
Chinese perchOP
I have a client side component that I can see is working as expected, for visibility my component has these parts that are important to this issue:
At this point I can see my sessionUrl is correct.
On click I get redirected to my sessionUrl as expected. On the page.tsx file I am doing this:
And locally this works perfectly. But on vercel I see the following response from my console logs:
what is my slug fs3f-23
what is my slug undefinedfs3f-23
I have no idea why.
export const setActionParams = (sessionType: ActionParams, router) => {
if (sessionType.paid) {
const sessionUrl = `/session/${sessionType.vidId}`
console.log('I can view my session url here in paid', sessionUrl)
return {
variant: 'secondary',
onClick: () => router.push(sessionUrl),
text: 'Join session',
}
}
return {
variant: 'primary',
onClick: () => router.push(sessionType.stripeUrl),
text: 'Pay now',
}
}
return (
<Card>
{sessions.map(session => {
const actionParams = setActionParams(session, router)
return (
<SessionListItem
key={session.id}
Action={
<Button variant={actionParams.variant} onClick={actionParams.onClick}>
{actionParams.text}
</Button>
}
actionStates={['imminent', 'present', 'attention']}
showProvider
client={session.fullName}
provider={session.fullName}
providerId={session.providerId}
datetime={session.date}
paid={session.paid}
/>
)
})}
</Card>
)
At this point I can see my sessionUrl is correct.
On click I get redirected to my sessionUrl as expected. On the page.tsx file I am doing this:
'use server'
import VideoContainer from './VideoContainer'
export default async function SessionPage({ params }: { params: { slug: string } }) {
const { slug } = params
console.log('what is my slug', slug)
return <VideoContainer sessionId={slug} />
}
And locally this works perfectly. But on vercel I see the following response from my console logs:
what is my slug fs3f-23
what is my slug undefinedfs3f-23
I have no idea why.
12 Replies
Chinese perchOP
Like why would it concat undefined to it? I it would make so much more sense to me if it was just undefined. But what on gods green earth is happening here?
I have also written a little util that does this which I use in my page.tsx file:
const urlToReturn = (url: string) => {
if (slug.startsWith('undefined')) {
return slug.replace('undefined', '')
}
return slug
}
just to confirm that what I am seeing is exactly whats happening, and that works.
const urlToReturn = (url: string) => {
if (slug.startsWith('undefined')) {
return slug.replace('undefined', '')
}
return slug
}
just to confirm that what I am seeing is exactly whats happening, and that works.
I obviously don't want to leave it like that though.
I also notice that the server renders twice, at like 2 miliseconds apart. The first render has the correct slug, the second has the concatinated slug. The double render also doesn't happen locally. I've built a production build and cannot repoduce
Chinese perchOP
Any suggestions or ideas would be greatly appreciated, I've spent a full morning on this issue now.
try
console.log(sessionType.stripeUrl)
or
console.log(sessionURL)
just before returning the setActionParams
Does
session
change at anytime between rendering <SessionListItem />
and clicking the <Button>
?Chinese perchOP
I can view my session url just before I return in setActionParams. Session never changes between rendenering. Also all of that would make sense if my response was undefined. but undefinedfs3f-33 makes no sense to me. Like it clearly has some idea what the prop is. And where on earth is that concatenating happening?
I'm going to hardcode the SessionUrl and see if that still gives the same response
Chinese perchOP
if I hardcode the sessionUrl to be 123456 I see on my page.tsx undefined123456. Let me see if I pull all of this into it's own lil repo if I can repoduce