The problem I will describe bellow is happening in Nextjs 14 app router with server actions.
this was not happening with Nextjs 13.4.19, but when I tried 13.6 it also happened, so it isn't a 14 version issue

I tried but failed to reproduce this error in a new repository, even under very similar circunstances.

Here's what's going on:

I have a app/panel/layout.tsx as follows:

...
      return (
        <main className="">
          <PanelSidebarsLayout />

          <div className="p-8 lg:ml-64">{children}</div>

          <Toast />
        </main>
      )

Under PanelSidebarsLayout I have:

'use client'
...
    return (
      <SidebarProvider user={user} campaign={campaign}>
        <PanelSideBar />
        <SupporterTopBar />
        <SupporterSideBar />
      </SidebarProvider>
    )

Under SupporterTopBar I have a button that triggers the SupporterSidebar.

Under SupporterSidebar I have two buttons and an option state, when I click the first button it triggers the form option, so the UI re-renders and shows a form.

In this form I have a UseEffect as follows:

  useEffect(() => {
    (async () => {
      const info = await fetchInfo() // server action
      console.log(info)
    })()
  }, [])

No matter what I remove from this file, even if I let only the useEffect and a fragment return, info will ALWAYS be undefined. What makes me believe there's some issue with higher level components. I will be leaving a print on the post of the request timing (that has a CAUTION message that I don't know what means)

And yeah, I logged the response in the server action itself one line before the function return, like this:

   export async function fetchInfo() {
      const info = await prisma[...]
      console.log(info) // this is defined, and then get undefined when gets to the client
      return info
   } 

Currently I'm stuck with next 13.4, where my code works.