Duplicate page name error display needs improved

[flybayer]

What is the problem?

As you can see in the below log, it's hard to read and parse the error message.

• [ ] It shouldn't have a stack trace
• [ ] It should list all duplicate routes if there are more than one
• [ ] It should have a more easy to read message like below

  
  ready - started server on 0.0.0.0:3000, url: http://localhost:3000
  info  - Loaded env from /Users/b/c/ahts/homeschool-boss/.env.local
  info  - Loaded env from /Users/b/c/ahts/homeschool-boss/.env
  info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5

The page component is named "ShowOrderPage" on the following routes

/admin/orders/[orderId]
/orders/[orderId]
/custom/orders/[orderId]

The page component must have a unique name across all routes, so change the component names so they are all unique.

Error: Duplicate Page Name

### Paste all your error logs here:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000 info - Loaded env from /Users/b/c/ahts/homeschool-boss/.env.local info - Loaded env from /Users/b/c/ahts/homeschool-boss/.env info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5 Error: The page component is named "ShowOrderPage" on both the /admin/orders/[orderId] and /orders/[orderId] routes. The page component must have a unique name across all routes, so change the component name on one of those routes to avoid conflict. at /Users/b/c/ahts/homeschool-boss/node_modules/next/dist/build/routes.js:193:23 at Array.filter () at dedupeBy (/Users/b/c/ahts/homeschool-boss/node_modules/next/dist/build/routes.js:182:16) at generateManifest (/Users/b/c/ahts/homeschool-boss/node_modules/next/dist/build/routes.js:200:37) at Object.saveRouteManifest (/Users/b/c/ahts/homeschool-boss/node_modules/next/dist/build/routes.js:116:47) at async DevServer.prepare (/Users/b/c/ahts/homeschool-boss/node_modules/next/dist/server/dev/next-dev-server.js:239:9) at async /Users/b/c/ahts/homeschool-boss/node_modules/next/dist/cli/next-dev.js:120:9

### What are detailed steps to reproduce this?

1. Add three pages at different urls, with component name of `Page` or anything else, as long as all pages have same name
2. Run `blitz dev`

### How to fix

Here's the current code for this: https://github.com/blitz-js/blitz/blob/canary/nextjs/packages/next/build/routes.ts#L227-L232

Essentially solution is instead of throwing full error message, first log pretty error with [`baseLogger.error()`](https://github.com/blitz-js/blitz/blob/canary/nextjs/packages/next/server/lib/logging.ts#L31), then throw error with "Duplicate Page Name". But first delete `error.stack` before throwing so it won't log.

[ajwgeek]

Would it be possible to handle this error in a way that would keep the development server running? When I am making new pages, I frequently copy and paste an existing page. This usually causes the development server to crash:

Listening on 127.0.0.1:9181.
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

Error: The page component is named "UpdateFAQ" on both the /cms/frequentlyAskedQuestion/[id] and /cms/blah/create routes. The page component must have a unique name across all routes, so change the component name on one of those routes to avoid conflict.
    at /workspaces/monorepo/node_modules/next/dist/build/routes.js:193:23
    at Array.filter (<anonymous>)
    at dedupeBy (/workspaces/monorepo/node_modules/next/dist/build/routes.js:182:16)
    at generateManifest (/workspaces/monorepo/node_modules/next/dist/build/routes.js:200:37)
    at Object.saveRouteManifest (/workspaces/monorepo/node_modules/next/dist/build/routes.js:116:47)
    at async DevServer.prepare (/workspaces/monorepo/node_modules/next/dist/server/dev/next-dev-server.js:239:9)
    at async /workspaces/monorepo/node_modules/next/dist/cli/next-dev.js:120:9
node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "1".] {
  code: 'ERR_UNHANDLED_REJECTION'
}
@ajwgeek ➜ /workspaces/monorepo (canary ✗) $ 

[lucas-barros]

Hi @flybayer may I work on this issue?

[abuuzayr]

hey @lucas-barros thank you, i have assigned you, do let us know if you need any help with this issue!

[p-siriphanthong]

I already open the PR for this issue 4 days ago. Anyone, please review.

[beerose]

I already open the PR for this issue 4 days ago. Anyone, please review.

Hey @p-siriphanthong, I'm sorry for the delay. I'll review it today.