Server Actions | Expected '{', got 'async'

[MwSpaceLLC]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/icy-dream-h8h9t9

To Reproduce

import on client component server action setServerCookies:

'use server'

import {cookies} from "next/headers";

/**
 *
 * @param props
 * @returns {Omit<RequestCookies, "set" | "clear" | "delete"> & Pick<ResponseCookies, "set" | "delete">}
 */
export async const setServerCookies = (...props) => cookies().set(...props)

error:

⨯ ./actions/global.actions.js Error: × Expected '{', got 'async' ╭─[W:\projects\djcode.it\actions\global.actions.js:7:1] 7 │ @param props 8 │ @returns {Omit<RequestCookies, "set" | "clear" | "delete"> & Pick<ResponseCookies, "set" | "delete">} 9 │ */ 10 │ export async const setServerCookies = (...props) => cookies().set(...props) · ───── ╰────

Current vs. Expected behavior

make server action with arrow function

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 64618
  Available CPU cores: 32
Binaries:
  Node: 20.12.2
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.5 // Latest available version is detected (14.2.5).
  eslint-config-next: 14.2.5
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A

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

Webpack

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

next dev (local), next build (local), next start (local)

Additional context

i know the correct syntax is:

'use server'

import {cookies} from "next/headers";

/**
 *
 * @param props
 * @returns {Omit<RequestCookies, "set" | "clear" | "delete"> & Pick<ResponseCookies, "set" | "delete">}
 */
export async function setServerCookies(...props) {
    cookies().set(...props)
}

but i think that this is not property dev experience to break compiler if we use arrow => funciton.

[icyJoseph]

The correct arrow function syntax is:

export const setServerCookies = async (...props) => { 
    cookies().set(...props);
}

Note the position of the async keyword:

[MwSpaceLLC]

We apologize, I think I made a mistake.

[MwSpaceLLC]

so, with arrow functio, same function, we have this error.

⨯ Internal error: Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported. at eF (W:\projects\djcode.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:270462) at eq (W:\projects\djcode.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:274676) at eJ (W:\projects\djcode.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:275293) at Timeout._onTimeout (W:\projects\djcode.it\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:265080) at listOnTimeout (node:internal/timers:573:17) at process.processTimers (node:internal/timers:514:7) digest: "58502399"

'use server'

import {cookies} from "next/headers";

/*

• @param props
• @returns {Omit<RequestCookies, "set" | "clear" | "delete"> & Pick<ResponseCookies, "set" | "delete">} */ export const serverActionSetCookies = async (...props) => cookies().set(...props)

[icyJoseph]

What kind of data are you passing between client and server actions? only serializable stuff can be send over the network.

[MwSpaceLLC]

we pass same data, but function not arrow work:

'use server'

import {cookies} from "next/headers";

/*

• @param props
• @returns {Omit<RequestCookies, "set" | "clear" | "delete"> & Pick<ResponseCookies, "set" | "delete">} */ export async function serverActionSetCookies(...props) { cookies().set(...props) }

pass data: serverActionSetCookies('registerEmail', formValues.email || registerEmail)

[icyJoseph]

Ohh, implicit return is tricky, hehe. Change to:

export const serverAction = async (...props) => {
  // Set your cookies here
}

That'll make the return type undefined.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.