ServerComponentProps type mismatch - req field not present

[b3nab]

Describe the Bug

I am trying to build a plugin and I was trying to add a new react server component to the beforeLogin.

The type ServerComponentProps define a req field of type PayloadRequest

payload/packages/payload/src/admin/forms/Field.ts

Lines 70 to 94 in 4c8cafd

	export type ServerComponentProps = {
	clientField: ClientFieldWithOptionalType
	clientFieldSchemaMap: ClientFieldSchemaMap
	collectionSlug: string
	data: Data
	field: Field
	/**
	* The fieldSchemaMap that is created before form state is built is made available here.
	*/
	fieldSchemaMap: FieldSchemaMap
	/**
	* Server Components will also have available to the entire form state.
	* We cannot add it to ClientComponentProps as that would blow up the size of the props sent to the client.
	*/
	formState: FormState
	i18n: I18nClient
	id?: number | string
	operation: Operation
	payload: Payload
	permissions: SanitizedFieldPermissions
	preferences: DocumentPreferences
	req: PayloadRequest
	siblingData: Data
	user: User
	}

This type is exported from admin/forms/Field.ts, is this the correct place?
But more important, is this the correct type to use for an admin server component?

I got this error after I tried to get props.req.url:

[ Server ] Error: Cannot read properties of undefined (reading 'url')

Debugging the code I didn't found req inside the props object but there is a params field which is not present inside the type.

Link to the code that reproduces this issue

https://github.com/b3nab/payload/tree/repro/server-component-props-type-mismatch

Reproduction Steps

If you use the reproduction repo, just simply
pnpm install
cd reproduction
pnpm generate:importmap
pnpm thisdev
Be careful to run the thisdev script from reproduction folder.

--
Or if you want to run it by yourself:

Really simple, just add a beforeLogin to admin components.

admin: {
    components: {
      beforeLogin: ['/BeforeLoginServer.js#BeforeLoginServer'],
    },
  },

The BeforeLoginServer.ts

import type { ServerComponentProps } from 'payload'
import { redirect } from 'next/navigation.js'

export const BeforeLoginServer = async (props: ServerComponentProps) => {
  console.log('[COMPONENT] -- SERVER: BeforeLoginServer')
  console.log('[COMPONENT] -- SERVER: props', props)
  const { payload } = props

  const dbHasUser = await payload.db.findOne({
    collection: 'user',
  })

  console.log('dbHasUser', !!dbHasUser)

  const currentRoute = props.req.url
  // const currentRoute = props.params.segments
  const createFirstUserRoute = '/admin/auth/create-first-user'

  if (!dbHasUser && currentRoute !== createFirstUserRoute) {
    redirect(createFirstUserRoute)
  }

  return (
    <div>
      <h1>Before Login Server</h1>
      Has user: {dbHasUser ? 'yes' : 'no'}
    </div>
  )
}

If you don't have a user collection with auth: true, here is one you can copy/paste inside the collections field of payload config:

{
    slug: 'users',
    auth: {
        disableLocalStrategy: true,
    },
    fields: [
      {
        name: 'name',
        type: 'text',
      }
      ],
    },

Which area(s) are affected? (Select all that apply)

area: core

Environment Info

Binaries:
  Node: 20.14.0
  npm: 10.7.0
  Yarn: 3.4.1
  pnpm: 9.15.5
Relevant Packages:
  payload: 3.23.0
  next: 15.1.5
  @payloadcms/db-mongodb: 3.23.0
  @payloadcms/db-postgres: 3.23.0
  @payloadcms/graphql: 3.23.0
  @payloadcms/next/utilities: 3.23.0
  @payloadcms/richtext-lexical: 3.23.0
  @payloadcms/translations: 3.23.0
  @payloadcms/ui/shared: 3.23.0
  react: 19.0.0
  react-dom: 19.0.0