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

[jgeschwendt]

Link to the code that reproduces this issue

https://github.com/jgeschwendt/repro-next-relay-server-action

To Reproduce

using the following relay code in a server action:

 const taggedNode = graphql`
    mutation actionsSetThingMutation($value: String!) {
      setRocket(value: $value) {
        name
      }
    }
  `

https://github.com/jgeschwendt/repro-next-relay-server-action/blob/test/src/app/actions.ts#L8-L16

causes this error:

> repro-next-relay-server-action@0.1.0 build /home/runner/work/repro-next-relay-server-action/repro-next-relay-server-action
> next build

⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

  ▲ Next.js [14](https://github.com/jgeschwendt/repro-next-relay-server-action/actions/runs/9086042499/job/24970806880#step:6:15).2.3

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

./src/app/actions.ts
Error: 
  x The "use server" directive must be at the top of the file.
   ,-[/home/runner/work/repro-next-relay-server-action/repro-next-relay-server-action/src/app/actions.ts:1:1]
 1 | "use server";
   : ^^^^^^^^^^^^
 2 | 
 3 | import { graphql } from "relay-runtime";
 4 | import { revalidatePath } from "next/cache";
   `----

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

> Build failed because of webpack errors

reproduced in GitHub Actions: https://github.com/jgeschwendt/repro-next-relay-server-action/actions/workflows/ci.yaml

Current vs. Expected behavior

I am able to use the relay compiled tagged node in a server action

Provide environment information

GitHub: `ubuntu-latest`
Node: 20
pnpm: 9
Next.js: 14.2.3

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

Not sure, SWC

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

next dev (local), next build (local)

Additional context

No response

[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

> repro-next-relay-server-action@0.1.0 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.

[kdy1]

It's a bug of SWC relay plugin

[kdy1]

~It was not the case. The SWC Wasm plugin was correct.~

      eagerEsModules: true,

was the cause

[kdy1]

https://github.com/swc-project/plugins/pull/306 should fix it