Next.js Discord

Discord Forum

Receiving a very confusing slug on a server component

Unanswered
Chinese perch posted this in #help-forum
Open in Discord
Avatar
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:

 
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

Avatar
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.
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
Avatar
Chinese perchOP
Any suggestions or ideas would be greatly appreciated, I've spent a full morning on this issue now.
Avatar
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> ?
Avatar
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
Avatar
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