Parallel / Intercepting Route (Modal) won't close until Server Action completes

[steve-marmalade]

Link to the code that reproduces this issue

https://github.com/marmalade-labs/nextgram

To Reproduce

1. Navigate to deployed application: https://nextgram-sigma.vercel.app/
2. Click a card to open a modal
3. Press the "Submit" button (which triggers a server action with a 5 second sleep)
4. Immediately try to close the modal by clicking the X

The diff against the "official" nextgram repo is pretty small: marmalade-labs/nextgram@9a1e69d

Current vs. Expected behavior

I expected the modal to close immediately, and for the server action to continue running in the background. Instead, the URL bar updates immediately, but the modal itself stays open until the server action completes.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Fri, 05 Apr 2024 00:14:23 +0000
  Available memory (MB): 31886
  Available CPU cores: 8
Binaries:
  Node: 18.18.2
  npm: 10.5.1
  Yarn: 1.22.22
  pnpm: 8.15.5
Relevant Packages:
  next: 14.2.1-canary.3 // Latest available version is detected (14.2.1-canary.3).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

App Router, Routing (next/router, next/navigation, next/link)

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

next dev (local), next start (local), Vercel (Deployed)

Additional context

The current situation makes it hard to use optimistic updates along with server actions + modals, because the user gets the immediate feedback that the action succeeded and naturally tries to close the modal soon after, which results in the app "hanging" until the server action completes and the router can catch up.

[steve-marmalade]

@ztanner - thought you might be interested in this given all of the effort you put into polishing Parallel + Intercepting routes

[ztanner]

Hey @steve-marmalade! Nice find, and thanks for the report. Looks like this is more generally related to pending server actions when using router.back rather than being tied to parallel routes. I've put up a PR!

[steve-marmalade]

@ztanner , incredible turnaround! Can't thank you enough.

Strangely, when I try to upgrade from next@14.2.1-canary.3 to next@14.2.1-canary.4, I am getting an error immediately when running next dev or next build:

  ▲ Next.js 14.2.1-canary.4
/usr/bin/bash: line 1:   191 Bus error               (core dumped) next build
error: script "build" exited with code 135
Error: Command "bun run build" exited with 135

I couldn't immediately reproduce in a fresh cookiecutter repo, so will try to research more (although it's tough with no additional logs).

[steve-marmalade]

@ztanner , actually it's very easy to reproduce, helpfully. Check out https://github.com/marmalade-labs/canary-crash . This is just bunx create-next-app and then bun add next@14.2.1-canary.4 eslint-config-next@14.2.1-canary.4. Running bun dev crashes (albeit with exit code 0) and bun run build exits 0 but without creating any pages. (The same happens with pnpm, so it doesn't seem like a bun issue).

LMK if it's better to create a new issue 🙏

[ztanner]

@steve-marmalade I wasn't able to repro with bun or pnpm -- I also don't see any changes between those versions that would cause that behavior. Might be best to open a new issue!

[steve-marmalade]

@ztanner very strange indeed. I went ahead and created #64468.

I wonder: did you test on a Mac? Does everything work for you if you try to deploy on Vercel?

It could be that this is a Linux-only issue, possibly related to an issue with @next/swc-linux-x64-gnu@14.2.1-canary.4 (which I noticed is ~40 megabytes smaller than the 14.2.1-canary.3 build artifact).

[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.