Redirect in Server Actions does not unmount Intercepting Route Modal

[FinThunderstorm]

Verify canary release

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

Provide environment information

Tested with both canary and latest stable as canary's info instructed
❯ npx --no-install next info

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:51:50 PDT 2023; root:xnu-8796.121.2~5/RELEASE_X86_64
    Binaries:
      Node: 20.1.0
      npm: 9.6.4
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.10-canary.8
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A


warn  - Latest canary version not detected, detected: "13.4.10-canary.8", newest: "13.4.10".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

❯ npm install next@13.4.10

changed 3 packages, and audited 449 packages in 7s

44 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

❯ npx --no-install next info

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:51:50 PDT 2023; root:xnu-8796.121.2~5/RELEASE_X86_64
    Binaries:
      Node: 20.1.0
      npm: 9.6.4
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.10
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

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

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/laughing-leaf-vg87y5?file=%2Fapp%2F%40modal%2F%28...%29form%2Fpage.tsx%3A7%2C16

To Reproduce

Based on CodeSandbox:

1. Open modal with link
2. Submit form
3. Wait for redirect
4. See that address is changed to non intercepted one
5. See that intercepted route's modal is still mounted

Describe the Bug

What happens: Redirecting within Server Actions does not unmount intercepted route modal even though redirection takes to non intercepted / non Modal route.

After redirect there is following error in console:

failed to get redirect response TypeError: fetch failed
    at Object.fetch (/project/sandbox/node_modules/next/dist/compiled/undici/index.js:1:26669) {
  cause: RequestContentLengthMismatchError: Request body length does not match content-length header
      at write (/project/sandbox/node_modules/next/dist/compiled/undici/index.js:1:67105)
      at _resume (/project/sandbox/node_modules/next/dist/compiled/undici/index.js:1:66726)
      at resume (/project/sandbox/node_modules/next/dist/compiled/undici/index.js:1:65413)
      at connect (/project/sandbox/node_modules/next/dist/compiled/undici/index.js:1:65301) {
    code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
  }
}

Expected Behavior

After submitting the form with Server Actions inside of Intercepting Route Modal, I expect the intercepted modal to unmount after redirect non-intercepted route.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[blakeplumb]

Bug is even worse in latest 14.0.2 as now it doesn't even preform the redirect. It causes the form to sit forever with a status of pending.

[chrisb2244]

I'm trying to do something similar with a set of intercepting pages for modals and then the corresponding 'real' routes.

If I hard refresh through the non-modal cases, it works fine, but only the first modal appears (the server action redirect doesn't seem to work, although the terminal console indicates changes).

app/
- @loginModal/
-- (.)auth/
--- login/page.tsx (wraps LoginForm in a modal component)
--- validate/page.tsx
-- default.tsx

- auth/
-- login/page.tsx
-- login/LoginForm.tsx (rendered on both login routes)
-- validate/page tsx
-- validate/ValidateLoginForm.tsx

// serverActions for each ...Form.tsx <form action={..}> element
export const signInFromFormWithRedirect = async (formData: FormData) => {
  const email = formData.get('email');
  if (email === null || typeof email !== 'string') {
    return false;
  }
  const signInSuccessful = await signIn(email); // Call the database functions
  if (signInSuccessful) {
    redirect(
      `/auth/validateLogin?email=${encodeURI(email)}`,
      RedirectType.push // This is I believe the default, but I tried adding just in case
    );
  }
};


export const verifyLoginWithRedirectFromForm = async (data: FormData) => {
  const email = data.get('email');
  const verificationCode = data.get('verificationCode');
  if (typeof email !== 'string' || typeof verificationCode !== 'string') {
    return false;
  }
  const result = await verifyLogin({email, verificationCode }); // Call the database functions
  if (result) {
    redirect('/');
  }
};

I tried various placements of default.tsx, [...catchAll] routes, (...)auth rather than (.)auth, trying to make auth not intercept inside the modal parallel route but instead have something like (..)login (but I don't think that can work, since the route to intercept is not there but under a real auth segment...)

This seems like it would be a great feature but every time I try use I find something I can't make work. I'm not sure if it's bugged, poorly documented, or I'm just doing it all wrong.

[chrisb2244]

I realise that in my case, I may have a combination of this issue (because my login modal never disappears) and these issues: #57665, #58661.

[balazsorban44]

Hi, I just tested the OP's reproduction on the latest next@canary release, and it should be working now, so please upgrade! If you are still having a problem, please open a new issue instead. Thanks!

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