Getting an error: "Failed to find Server Action "4a68...". This request might be from an older or newer deployment."

[Jared-Dahlke]

I recently deployed an App dir 14.0.1 Nextjs application and have several users using it at my company. It uses server actions heavily. This AM i started getting some errors in Sentry:

Failed to find Server Action "4a682493280336616b4a9a906883df1c9dcdd5a5". This request might be from an older or newer deployment.

My assumption is that my users haven't refreshed their browser since I pushed out some changes.

Anyone ever seen anything like this? Any ideas or tips? Should I push out some change that makes users refresh when a new release is out?

[lotusjohn]

Getting the same in local dev on 14.0.0 up to 14.0.5 canary 5 for any server action which is triggered from client component.
Server action in a server component works.

Working:

//ServerForm.tsx

export default function ServerForm() {
  const action = async (formData) => {
    'use server'
    console.log('server action', formData.get('name'))
  }
  return (
    <form action={action}>
      <input name={'name'} />
      <button type={'submit'}>Submit</button>
    </form>
  )
}

Doesnt work:

//action.ts

'use server'
export async function formServerAction(params) {
  //code 
  return 'return value here'
}

//ClientCompForm.tsx

//component code
const onSubmit: SubmitHandler<FormInput> = async (data) => {
    //code
    await formServerAction(reqParams)
}

[Jared-Dahlke]

@lotusjohn, I started passing in server actions from server components and it seems to have fixed the problem.

so basically like this:

// server component

import { saveData } from 'actions/saveData'

export default async function Page() {
  

  return (
    <ClientComponent
      saveData={saveData}
    />
  );
}

Then i can use it in the ClientComponent like this:

'use client'

export const ClientComponent=({saveData})=> {

return (
  ...some form
<button onClick={saveData}></button>
)

}

or i can just keep the server action in the server component like this:

// server component


export default async function Page() {
  
  const saveData=async(data)=> {
      'use server'
      //save data to db

   }

  return (
    <ClientComponent
      saveData={saveData}
    />
  );
}

Both seem to work, and prevent the error.

Can you confirm if you've tried similar? Glad to see i'm not the only one who experienced this.

[lotusjohn]

I just tried passing as prop as well and it worked!

[Jared-Dahlke]

@leerob this seems to be a problem, but we don't have the ability to make a repro repo because it requires multiple deployments to reproduce. can you please look into this or address?

[ken-spencer]

I am experiencing the same problem as well. In my application if I log out in one tab and then trigger a server action in the other tab I get this error every time.

[mastoj]

I also got this now using next 14.0.4. For me it happens when the server actions is called from an parallel intercepted route. The exact same code works fine from the actual route.

[ken-spencer]

I was able to figure it out in my application. Logging out in one tab prevented the server actions in the other tab from working because the middleware was now redirecting them. Never would have guessed from the error :)

[ahmetkca]

I am facing the same problem. However, it is slightly different. I have a tanstack query in a client component where I use server action as queryFn. The problem arises when I invalidate this tanstack query from parallel intercepted route.

[Jared-Dahlke]

I also got this now using next 14.0.4. For me it happens when the server actions is called from an parallel intercepted route. The exact same code works fine from the actual route.

Can you please expand on this? What do you mean by "parallel intercepted route" and "actual route"? Explain like I am 80 IQ please. Can you give example? Why is this not being fixed or better addressed?

[ahmetkca]

I also got this now using next 14.0.4. For me it happens when the server actions is called from an parallel intercepted route. The exact same code works fine from the actual route.

Can you please expand on this? What do you mean by "parallel intercepted route" and "actual route"? Explain like I am 80 IQ please. Can you give example? Why is this not being fixed or better addressed?

What I mean by parallel intercepted route is this:

In /boards/[boardId] page.tsx I display tasks for the given board. If you click on a task, it opens the comments for the clicked task in the modal, /boards/[boardId]/tasks/[taskId]/comments.

The route /boards/[boardId]/tasks/[taskId]/comments is rendered on top of /boards/[boardId] in a modal. So the route /boards/[boardId]/tasks/[taskId]/comments is being intercepted.

User adds a a new comment. I want to invalidate the query so that the number of comments in the /boards/[boardId] updates. I invalidate the tanstack query but because server actions cannot be found it fails.

Error: Failed to find Server Action "de6c6489e15944f0b88e9d483d2eef1d967c7a4c". This request might be from an older or newer deployment. Original error: Invariant: Couldn't find action module ID from module map.

[mkbctrl]

In my case it happens when trying to redirect on successfully submitted form.
Fun fact: it worked for like an hour or two, and then it started to throw error 🙃 - maybe a local dev issue?

useEffect(() => {
    if (state?.submitted) {
      actionRedirect(Path.UserHome)
    }
  }, [state])

where:

'use server'

import { Path } from 'src/constants/path'
import { redirect } from 'src/services/i18n/i18n-navigation'

/**
 * actionRedirect - if you need to trigger redirect from the client component
 * https://nextjs.org/docs/app/api-reference/functions/redirect
 */
export async function actionRedirect(path: Path) {
  redirect(path)
}

error:

rror: Failed to find Server Action "017bd78c23c5fecaef8cb9b835f35b17bdd6640d". This request might be from an older or newer deployment. Original error: Invariant: Couldn't find action module ID from module map.

By the way, anyone has an approach to onFormSubmission side effects, and is willing to share? I am working with native useFormState, gave it a ride, and it's missing a bit in flexibility or I can't wrap my head around on Next.js 14 specifics yet

EDIT:
In my case non of the workarounds work.

EDIT2:
Using router.push started to work -> I ended up reading this https://nextjs.org/docs/app/api-reference/functions/redirect due to the warning the contents I don't remember stating I should use server action... What a maze 😂

[paulinhapenedo]

I'm getting the same error. The full error message:

Error: Failed to find Server Action "ff338b32de2c62c9fce3998a34545a3e0672f704". This request might be from an older or newer deployment. Original error: Invariant: Couldn't find action module ID from module map.

The stack I'm using:
next: 14.1.0
next-auth: 4.24.5
react-query: 5.18.0

It happens whenever the user's JWT token expires and Tanstack Query tries to refetch the data on the background. All of my query/mutation functions are Server Actions. In them, I have this code running before actually fetching anything:

// serverAuth lives in another file
export const serverAuth = async () => await getServerSession(authOptions);


// actual Server Action
'use server';

const getUnitPractitioners = () => {
 const session = await serverAuth();

  if (!session) {
    LOG.error('🚨 No session found when fetching practitioners for this unit');
    return Promise.reject(
      'No session found when fetching practitioners for this unit'
    );
  }

// does whatever action is necessary

return data;
}

[steventkrawczyk]

I'm experiencing the same issue

[ghunkins]

Same issue on both stable and canary releases for next.

Re-echoing that it appears to occur when using the Client Components data fetching paradigm.

[Lebraz98]

I have same problem.
I have fixed it by remove request.headers from fetch header and create new header value
not pass the next request header inside fetch create new header request value like this

old code: image

new code:

[Prains]

Same issue here. Happens when i reopen intercepted modal window that uses server actions in client components using browser navigation.

[teddybee]

Same issue here.
I would like to do a simple logout (jwt cookie clear) and redirect to home in server action.

[newtonMM]

I'm experiencing the same issue, were you able to fix ir

[GVALFER]

Same here

"next": "^14.1.0",

Error: Failed to find Server Action "572c475e1c59eeb141374e2737137c179e2063dc". 
This request might be from an older or newer deployment. Original error: Invariant: Couldn't find action module ID from module map.
    at t3 (/.../node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:1693)
    at /.../node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:7079
    at AsyncLocalStorage.run (node:async_hooks:338:14)

[abdtriedcoding]

Any updates facing same issue ?

[RestartDK]

I get a similar error when I use react-email...

[sim391calado]

I have this exact same issue.

[Jared-Dahlke]

Yeah honestly I would recommend just use TRPC for all of your server calls. It will create api routes for all of them. APi routes are just more stable and predictable Sent from [Proton Mail](https://proton.me/mail/home) for iOS

…

On Sat, May 11, 2024 at 9:30 AM, Nguyen Minh Tuan ***@***.***(mailto:On Sat, May 11, 2024 at 9:30 AM, Nguyen Minh Tuan <<a href=)> wrote: I have an issue "failed to find server action".before it logs the error, i can call server actions 2 times and it's dies when trigger the 3rd time, idk why — Reply to this email directly, [view it on GitHub](#58431 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/AH3JIEXMP5KXURCC6HQI25TZBZBQTAVCNFSM6AAAAAA7K2MJBKVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TGOJXGAYDI). You are receiving this because you authored the thread.Message ID: ***@***.***>

[T3chnoMaciej]

Hello, for anyone that may encounter similar problem - in my case it was dynamic og-image generation that caused "Failed to find server action" error. NextJS changed package name from "next/server" to "next/og". That small change fixed error for my use case with dynamic opengraph.

From:
import { ImageResponse } from "next/server";
To:
import { ImageResponse } from "next/og";

I hope it saves someone's time. Cheers

[Oteiza-a]

This error happens to me when I call a server action in my useEffect in a client component, and do a client-side navigation to another page before the server action finishes. This results in the client receiving undefined as response and the server side generating the Error: Failed to find Server Action error.

For now I will just validate that the server action responds a valid value, but I still find no solution for the server side.

[OU9999]

in my case, upgrading the version of next worked well in my case.

error message

Error: Failed to find Server Action "~~~". This request might be from an older or newer deployment

before

"next": "14.1.3",

after

 "next": "^14.2.5",

[noorulh06]

Any update on this?
I am on latest version of next js "^14.2.5" and getting same issue.
Error: Failed to find Server Action "74c865cbe0806fdeefdb08160fa74838f6ea96ff".......
No matter what I try, server action always generates new id on each build. Though I don't know why it's not reproducible locally.

[adriangalilea]

Following: #69547

I'm going ahead and shipping this one because it's quite literally broken on main.
@leerob

I tried the versions on the example here

    "react": "rc",
    "react-dom": "rc",
    "next": "canary"

And I ran into similar issues, Error: Failed to find Server Action ......

I also found literally impossible to use server actions inside client components to fetch data.

None of the methods I used before worked for me, and I get no proper error/warning so I have no clue.

Tried:

• SWR
• TanstackQuery
• useEffect

All methods that I used previously and worked to some degree failed, so I have no idea how to use server actions from client components as of now.

[probablykabari]

This started happening to me in next 14.2.8. Downgrading to 14.2.7 resolved it for the time being.

[Suprndm]

Same

[joel-wlf]

Same here

[controversial]

I’m also seeing this error appear on 14.2.8, even when on the latest deployment

[controversial]

I found a reproduction and filed #69756

[controversial]

cc @probablykabari

[controversial]

#69788 now merged to fix the issue that was introduced in 14.2.8

[chriskuech]

I'm observing this issue with 14.2.9

[controversial]

can you create a reproduction and send it to @huozhi in #69756?

[chriskuech]

It turns out the issue was that I had a normal helper function that contained use client at the top of the file. It was added by the VS Code "Refactor" feature so I did not realize it had been added.

I would very much appreciate stronger static validation of Next apps as cryptic build and runtime errors are all too common and extra hard to debug with inaccurate error messages.

[fi5u]

At least for me, was still broken with 14.2.9 but now issue is fixed with 14.2.10.

[huozhi]

We released v14.2.10 with the fix, could you upgrade to the latest version and verify if that fixed for you? 🙏 Thanks

[arman94]

I encountered the same issue. I was importing my server action using an absolute path, but switching to a relative import resolved the problem

[huozhi]

If you still encounter it with latest Next.js version, please file an issue with reproduction, we can help take a look on it! 🙏

[marsonmao-trait]

Hi @huozhi, just wondering if we're expected to use the practice in #58431 (reply in thread) (i.e. using props to pass server actions around), or are we good with just importing them from a file in a Client component? 🙏

[huozhi]

@marsonmao-trait It should work if you import server action into client components, if you still have issues with it probably a bug. Would you mind filing an issue with your repro and tag me there? Thanks

[marsonmao-trait]

I installed 14.2.10 and I'm still getting undefined with a un-refreshed browser tab calling a server action.

Scenario: a user opens a tab, and then the server has a new deployment while the tab is not refreshed i.e. it becomes outdated / stale; in this case if the user Submit (with server action) using the stale client, the server action returns undefined

---

I tried this pattern: import server actions using relative path in a server component, and pass it as a prop to a client component, but it does not work

Referenced from #58431 (reply in thread) and #58431 (comment)

---

The specific behavior on my un-refreshed tab is: when clicking Submit, it fired a POST server action with header Accept = text/x-component, but and then it received a 200 response, with header Content-type = text/html; charset=utf-8, also the server action returns undefined.

So from the Dev console we can see an uncaught error saying "reading xxx from undefined", also the user would see no changes from the page (because the response seems to be the exact HTML structure of the current page).

In this case if the user chooses to refresh the tab, then it can work, but not every time the users are aware of this, obviously.

So I'm wondering how can I maybe detect this kind of response (server action returning undefined) gracefully, i.e. not to try-catch on "every" server action call, so that I can show an error message to the users and propose a manual refresh?

[abhi12299]

from the nextjs docs: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#security:~:text=However%2C%20for%20this,a%20specific%20build.
it seems that a server action can only be invoked for a particular build.

If this is the constraint, we can work around this by having an api route serve the build id to the frontend, and the frontend can poll for the build id. If it sees any changes, we can ask the user to refresh the page