This bug reproduction is using Next.js v14.0.4-canary.9

Short description

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

This app has 2 routes and 3 pages

1. Route / renders the file at src/app/page.tsx.

2. Route /foo renders the file at /src/app/@intercept/(.)foo/page.tsx when you navigate to it using the Nav to /foo <Link> below, and it renders the file at /src/app/foo/page.tsx if you refresh the browser while visiting it.

Steps to reproduce

1. Make sure you're at the root route /.

2. Fill in the name input text.

3. Click the Submit button in the /src/app/page.tsx box below.

4. It works as expected. The Submit button changes to Submitting... and after 3 seconds it changes back to Submit, and we 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.

What's expected to happen

1. The button should change to Submitting... based on pending from useFormStatus().

2. After 3 seconds the button should change back to Submit based on pending from useFormStatus(), and we should see the Server Action's response based on useFormState().

What happens

A. If you're visiting the root route / it works as expected.

B. If you're visiting the Intercepting Route /foo it doesn't work as expected, the button never changes back to Submit (pending is always true), and we never get the Server Action response via useFormState(). Client Components never re-render. It doesn‘t matter which button you click, none of them work on the Intercepting Route /foo.

C. The <Link> component stops working once the app gets stuck in the Submitting... state, but only when rendering the file at /src/app/@intercept/(.)foo/page.tsx and only on localhost. If you Click Nav to Landing it doesn't work anymore.

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.

/src/app/page.tsx





Response:

Nav to /foo

@intercept slot content: