vercel / next.js

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

Using a parallel route slot with dynamic route, in parallel to a catch-all route causes non-turbo dev server and build to fail. #71087

Open ItsWendell opened 1 month ago

ItsWendell commented 1 month ago

Link to the code that reproduces this issue

https://github.com/ItsWendell/nextjs-14.2.15-catch-all-parallel-routes-dynamic-segments-build-issues-repo

To Reproduce

Reproduction:

Clone this repository

  1. Run npm install
  2. Run npm run dev --turbo and visit http://localhost:3000/
  3. Press the "Lets visit a blog post that contains a slot with a dynamic parallel route." button, press "Start slotting" to visit a dynamic slot within that blog page / layout
  4. See that it works pretty well, now let's make it fail:
  5. Run npm run build, the build will fail with error: ENOENT: no such file or directory, open '/Projects/parallel-routes-catch-all/.next/server/app/(blog)/blog/[slug]/@info/info/[infoId]/page_client-reference-manifest.js'
  6. Run npm run dev (without turbo) see that it fails as soon as you click the "Start slotting" button with a similar error: ENOENT: no such file or directory, open '/Projects/parallel-routes-catch-all/.next/server/app/(blog)/blog/[slug]/@info/info/[infoId]/page_client-reference-manifest.js'

Current vs. Expected behavior

I expect next build to compile a valid version, since it works sucessfully in next dev --turbo as I expected. So that I can use the parallel routes together with catch-all routes, as next dev --turbo shows, it should have higher priority than the catch-all route.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Wed Oct  9 05:26:29 UTC 2024
  Available memory (MB): 31561
  Available CPU cores: 8
Binaries:
  Node: 22.8.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.15 // Latest available version is detected (14.2.15).
  eslint-config-next: 14.2.15
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.3
Next.js Config:
  output: N/A

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

Module Resolution, Parallel & Intercepting Routes

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

next dev (local), next build (local), next start (local)

Additional context

I tested against latest canary [15.0.0-canary.182](https://www.npmjs.com/package/next/v/15.0.0-canary.182) too, and the latest stable 14.2.15.

Workaround

I found a work around: Instead of using an required catch-all route I've replaced the catch-all route with a non-optional catch all route [[...slug]] vs [...slug], this seems to continue the build. Not optimal because in some cases you want to have e.g. a seperate page.tsx and a catch-all for all other pages, but we can work around that. This issue is still relevant, since this behavior should be the same with an optional catch all route.

ItsWendell commented 1 month ago

In my previous issue I pasted a wrong reproducable link: https://github.com/vercel/next.js/issues/71086

neltevreeke commented 1 month ago

šŸ‘

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!

alexfoxy commented 1 month ago

I've also been wrestling with this issue today. I have an example of a simple project that exhibits this behaviour here: https://github.com/alexfoxy/nextgram-main

To reproduce run the repository and navigate to http://localhost:3000/users/1.

Run with turbo (yarn dev-turbo)

Correctly renderers the user page beneath the user modal

Screenshot 2024-10-11 at 19 40 20

Run without turbo (yarn dev)

Renders the wrong page beneath the user modal

Screenshot 2024-10-11 at 19 41 15