Calling revalidatePath() or revalidateTag() in Server Actions that are triggered from Intercepting Routes breaks useFormStatus() and useFormState()

[flsilva]

Link to the code that reproduces this issue

https://github.com/flsilva/next-v14-revalidate-issue-1

To Reproduce

1. Visit https://next-v14-revalidate-issue-1.vercel.app
2. Scroll down and fill in the name input text.
3. Click the Submit button in the /src/app/page.tsx box.
4. It works as expected. The Submit button changes to Submitting... and after 3 seconds it changes back to Submit, and you can see the Server Action's response.
5. Click Nav to /foo to visit the Intercepting Route /foo.
6. Fill in the name input text in either form.
7. Click the Submit button in either form.
8. It doesn't work as expected. The Submit button changes to Submitting... but never changes back to Submit, and we never get the Server Action's response. Client Components never re-render.

Current vs. Expected behavior

When we're at the /foo Intercepting Route we should see the same behavior we see when we're at the root route /, i.e., after clicking the Submit button it should change to Submitting... and after 3 seconds it should change back to Submit, and we should see the Server Action's response.

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:23 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6020
Binaries:
  Node: 18.17.1
  npm: 9.6.7
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.4-canary.9
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

App Router

Additional context

I can reproduce the issue in v14.0.4-canary.9 on localhost and Vercel.

Code changes that results in the same behavior:

1. Changing revalidatePath('/') to revalidatePath('/', 'page').
2. Changing revalidatePath('/') to revalidatePath('/', 'layout').
3. Changing revalidatePath('/') to revalidatePath('/foo').
4. Changing revalidatePath('/') to revalidatePath('/foo', 'page').
5. Changing revalidatePath('/') to revalidatePath('/foo', 'layout').
6. Replacing revalidatePath() with revalidateTag('anything').

Code changes that results in the expected behavior:

1. If we comment out the revalidatePath('/') line of code in action.ts everything works as expected because we're not relying on cached data in this app.

Routing structure:

app
├── @intercept
│   ├── (.)foo
│   │   └── page.tsx
│   ├── [...catchAll]
│   │   └── default.tsx
│   └── default.tsx
│   └── page.tsx
├── foo
│   └── page.tsx
├── layout.tsx
└── page.tsx

Relevant code:

app/action.ts

"use server";

import { revalidatePath } from "next/cache";

export const action = async (
  previousState: string | undefined,
  formData: FormData
) => {
  const name = formData.get("name");
  await new Promise((resolve) => setTimeout(resolve, 3000));
  revalidatePath("/");
  return `name: ${name} | Math.random(): ${(Math.random() * 100).toFixed(2)}`;
};

app/MyForm.tsx

"use client";

import { useFormState } from "react-dom";
import { SubmitButton } from "./SubmitButton";
import { action } from "./action";

export const MyForm = () => {
  const [result, formAction] = useFormState(action, undefined);

  return (
    <form action={formAction}>
      <input type="text" name="name" placeholder="Name" autoComplete="off" />
      <SubmitButton />
      <p>Response: {result}</p>
    </form>
  );
};

app/SubmitButton.tsx

"use client";

import { useFormStatus } from "react-dom";

export const SubmitButton = () => {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
};

Replay:

_NEXT-1815

[ahrbil]

@flsilva I don't know if this is related to your issue, but have you noticed the action prop value on the form tag?
action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
🤔

[gipeey]

i'm here with the same issue too

[zitooo]

Same here. Using revalidateTag in a server action invoked in an intercepted route maintains the pending status forever, both on the intercepting and intercepted pages (in my case, @modal/(.)post/[slug]/page.js and /post/[ slug]/page.js). Deleting the @modal folder, the other one works correctly. Removing revalidateTag from the server action, both work. Using version 14.0.3

[balazsorban44]

Thanks, we will look into this! Anyone having a similar issue, please note that "same issue" without a reproducible code example is not useful. Please post your minimal reproduction, that we can have a look to verify, once a a fix has been made 🙏

[github-actions]

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.