vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.2k stars 27.02k forks source link

Next.js 14.2.4 Redirect from a Parallel Route Error #67651

Open DmytroIvakhnenkov opened 4 months ago

DmytroIvakhnenkov commented 4 months ago

Link to the code that reproduces this issue

https://github.com/t3dotgg/t3gallery

To Reproduce

  1. Start the application in dev.
  2. Sign in.
  3. Upload an image.
  4. Click on the image and then click the delete button.
  5. Get an error.

Current vs. Expected behavior

Repository is taken from Theo's React tutorial: https://youtu.be/d5x0JCZbAJs?si=gxFSgySJO5BoTcB_&t=9501. The error pertains to the delete button, the link above opens the video at the appropriate time of when he is setting up the button. The expected behavior can be observed in the video.

(I have tested and the above tutorial works fine in 14.2.3, but not after) Expected behavior: After pressing the delete button inside the image view in a parallel route, the image deletes from the database and subsequently the gallery and then the user is redirected from the image view to the home page.

Current behavior: After pressing the delete button inside the image view in a parallel route, the image deletes from the database and subsequently the gallery, however after the user is redirected to the home page the "Error: Image not found" appears.

https://github.com/vercel/next.js/assets/25930120/ab929cf1-666a-4051-9abf-e07ad500d077

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 65376
  Available CPU cores: 20
Binaries:
  Node: 18.17.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.4 // There is a newer version (14.2.5) available, upgrade recommended! 
  eslint-config-next: 14.2.4
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.3
Next.js Config:
  output: N/A
 ⚠ There is a newer version (14.2.5) available, upgrade recommended! 
   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

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

Parallel & Intercepting Routes

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

next dev (local), Vercel (Deployed)

Additional context

Bug has been introduced in the 14.2.4 release.

GrantHynd commented 3 months ago

+1 for the issue

I was following the same demo and experienced the issue with 14.2.4. Reverting to 14.2.3 did fix the problem.

So I removed the logic to do with the image deletion... So that I was left with a server action that triggers a redirect on a parallel route.

Below is wrapped in a client-side <Modal /> component as seen in the demo code.

// ImagePage.tsx
<form
  action={async () => {
    "use server";
    redirect("/");
  }}
>
  <Button type="submit" variant="destructive">
    Delete
  </Button>
</form>

The above seems to update the URL to "/" but the Modal is left on the screen and it looks like the ImagePage parallel route is fetched again (causing the error of the image not being found)

14.2.4 on parallel route redirect server action

Screenshot 2024-07-29 at 14 29 11

14.2.3 on parallel route redirect server action

Screenshot 2024-07-29 at 14 33 04
yc-codehack commented 2 months ago

+1 facing the same issue. Anybody found and solution for it ?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

jasongerbes commented 1 month ago

I've confirmed this issue still exists on the latest canary build (15.0.0-canary.174) - calling redirect in a server action doesn't dismiss the modal.

The behaviour is different in the older RC build (15.0.0-rc.0) - calling redirect in a server action dismisses the modal, however parallel routes stop working after the redirect (the modal cannot be reopened).