Error: It is not allowed to define inline "use server" annotated Server Actions in Client Components.

[dhairyathedev]

Summary

Unable to use use server inside a client component.

Additional information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.3.0: Wed Dec 20 21:30:27 PST 2023; root:xnu-10002.81.5~7/RELEASE_ARM64_T8103
Binaries:
  Node: 20.5.1
  npm: 9.8.0
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Example

No response

[icyJoseph]

Well it is pretty clear isn' it? Move it to its own file, and export it from there. The reason being that a server action is server code, which can be called from the client. However, the client bundle must not have access to that code to being with, in order to prevent leakage to the client.

Read more here:

• https://react.dev/reference/react/use-server#caveats

[dhairyathedev]

Thanks! I have fixed the error :)

[sojinsamuel]

Thnx for the explanation

[mfgabriel92]

Why is this way still in the official training if it doesn't work?