server action compiler error is thrown when `graphql` relay tags are used

[jgeschwendt]

server action compiler error is thrown when `graphql` relay tags are used

[kdy1]

It's a bug of SWC relay plugin

[icyJoseph]

Could you try one thing, move the use server directive, to the beginning of the function. Say, here:

export async function setValue(string: string): Promise<void> {
   'use server';
  // comment out the next two statements to successfully compile

Why? Well, it has been a while now, but IIRC, relay, pre-processes the file, and adds more code to it, that might be pushing down the use server directive at the top:

// for example after relay processes the file we might have
import someRelayStuff from './folder-made-by-the-relay-compiler';
// more of those

'use server';

import { revalidatePath } from "next/cache";

And that causes the issue you are seeing. We can try to confirm this by placing the use server directive within the function, which is also an allowed pattern.

[jgeschwendt]

moving the directive inside the function results in this error:

jgeschwendt@repro-next-relay-server-action % pnpm build

> [email protected] build /Users/jgeschwendt/GitHub/jgeschwendt/repro-next-relay-server-action
> next build

  ▲ Next.js 14.2.3

   Creating an optimized production build ...
Failed to compile.

./src/app/actions.ts
Error: 
  x It is not allowed to define inline "use server" annotated Server Actions in Client Components.
  | To use Server Actions in a Client Component, you can either export them from a separate file with "use server" at the top, or pass them down through props from a Server Component.
  | 
  | Read more: https://nextjs.org/docs/app/api-reference/functions/server-actions#with-client-components
  | 
   ,-[/Users/jgeschwendt/GitHub/jgeschwendt/repro-next-relay-server-action/src/app/actions.ts:3:1]
 3 | import type { actionsSetValueMutation } from '@/relay/actionsSetValueMutation.graphql';
 4 | 
 5 | export async function setValue(string: string): Promise<void> {
 6 |   "use server";
   :   ^^^^^^^^^^^^
 7 | 
 8 |   // comment out the next two statements to successfully compile
 9 |   const taggedNode = graphql`
   `----

Import trace for requested module:
./src/app/actions.ts
./src/app/Interactive.tsx


> Build failed because of webpack errors

https://github.com/jgeschwendt/repro-next-relay-server-action/actions/runs/9099994826/job/25013834155

[icyJoseph]

Not on my laptop now, but are you importing this function directly into a client module (use client)? If so, import it to a server component instead and pass it down as props, just to test if all of this makes it work... We are exploring the issue.

[jgeschwendt]

my bad, yes moving it into the RSC works
https://github.com/jgeschwendt/repro-next-relay-server-action/blob/rsc-action/src/app/page.tsx

[icyJoseph]

Alright, but then maybe this is something that Relay should fix, as in, respect, or check for, the presence of use server on the file. I'd say maybe open an issue over there, referencing this one.