ReferenceError: Cannot access 'c' before initialization only appears when building the app not in dev mode

[GerardPolloRebozado]

So the app works fine when running in development mode node console browser errors/warnings and the server console doesnt show any errors either, but when running the final build and trying to login it gives this error:

ReferenceError: Cannot access 'c' before initialization
    at Object.J (.next/server/chunks/5202.js:1:9434)
    at <unknown> (.next/server/chunks/5202.js:1:13955)
    at t.a (.next/server/webpack-runtime.js:1:914)
    at 556887 (.next/server/chunks/5202.js:1:12809)
    at t (.next/server/webpack-runtime.js:1:143)
    at <unknown> (.next/server/chunks/5202.js:1:20879)
    at t.a (.next/server/webpack-runtime.js:1:914)
    at 902726 (.next/server/chunks/5202.js:1:20686)
    at t (.next/server/webpack-runtime.js:1:143)
    at <unknown> (.next/server/chunks/5202.js:1:9456)
    at t.a (.next/server/webpack-runtime.js:1:914)
    at 175435 (.next/server/chunks/5202.js:1:9400)
    at t (.next/server/webpack-runtime.js:1:143) {
  digest: '3500124389'
}

I tried searching in both nextjs and payload github but no issues related so not sure how to fix this. The issue happens in the login form when I submit the form, this is my form:

'use client'

import { useActionState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { Button } from "@heroui/button"
import { Input } from "@heroui/input"
import { loginUserAction } from '@/app/actions/auth-actions'
import { useTranslations } from "next-intl"

export default function LoginPage() {
  const t = useTranslations('login')
  const router = useRouter()
  const [formState, formAction] = useActionState(loginUserAction, { success: undefined, message: '' })

  useEffect(() => {
    if (formState.success) {
      router.push('/')
    }
  }, [formState.success, router])

  return (
    <div className="flex flex-col items-center justify-center h-3/4 gap-2">
      <h1 className="text-3xl">{t('login2')}</h1>
      <form action={formAction} className="flex flex-col gap-2 w-96">
        <Input
          isRequired
          label={t('email')}
          isInvalid={formState.success === false}
          name="email"
          type="email"
        />
        <Input
          isRequired
          isInvalid={formState.success === false}
          label={t('password')}
          name="password"
          type="password"
        />
        <p className={`text-${formState.success ? 'success' : 'error'}`}>{formState.message}</p>
        <Button color="primary" type="submit">
          {t('login')}
        </Button>
      </form>
    </div>
  )
}

And this is my server action:

export async function loginUserAction(prevState: loginResult, formData: FormData): Promise<loginResult> {
  const email = formData.get('email') as string
  const password = formData.get('password') as string

  try {
    const payload = await getPayload({
      config: configPromise,
    })
    const result = await payload.login({
      collection: 'users',
      data: { email, password },
    })

    if (result.token) {
      const cookieStore = await cookies();
      cookieStore.set('payload-token', result.token, {
        httpOnly: true,
        secure: process.env.NODE_ENV === 'production',
        path: '/',
      });
      return { success: true, message: "Login exitoso" }
    } else {
      return { success: false, message: "Email o contraseña no válidos" }
    }
  } catch (error) {
    console.error("Login error", error)
    return { success: false, message: "Email o contraseña no válidos" }
  }
}

Not sure whats is wrong as looking at the repositry both of this files have not been changed since 1 month and the login form was working last week