[3.0] not-found.js 3 MB in size

cbratschi commented 4 months ago

Link to reproduction

No response

Describe the Bug

Created a new project:

npx create-payload-app@beta --use-npm

Loaded the admin panel and checked the network traffic. Saw that the not-found.js is 3 MB in size and therefore the largest downloaded file in dev mode. I guess Next.js bundles a lot of thing in this file. Please check why the not-found page is that large.

Sizes of other files:

main-app.js: 1.6 MB
layout.js: 2.6 MB
not-found.js: 3.0 MB

After building the file is still quite large on first load but much lower than in dev mode:

Route (app)                              Size     First Load JS
┌ ○ /_not-found                          904 B          89.5 kB
├ ƒ /admin/[[...segments]]               151 B           449 kB
├ ƒ /api/[...slug]                       0 B                0 B
├ ƒ /api/graphql                         0 B                0 B
├ ƒ /api/graphql-playground              0 B                0 B
└ ○ /my-route                            0 B                0 B
+ First Load JS shared by all            88.5 kB
  ├ chunks/7023-71529f8b8f19b14b.js      32 kB
  ├ chunks/fd9d1056-e7758cab2dfefddb.js  53.5 kB
  └ other shared chunks (total)          3 kB

Next.js always loads the not-found file in dev model. This large file could be responsible for higher startup times.

To Reproduce

See above.

Payload Version

3.0.0-beta.25

Adapters and Plugins

No response

cbratschi commented 4 months ago

This should be the not-found page:

https://github.com/payloadcms/payload/blob/beta/packages/next/src/views/NotFound/index.tsx

jacobsfletch commented 4 months ago

@cbratschi on my end the built page.js file is 3 KB, not 3MB. This is after running npm run build and looking at .next/server/app/_not-found/page.js:

Served, it's less than 1B (same as you've pictured above):

And running dev mode, my not-found page is only 3.1kB:

If you can provide some clearer reproducible steps we can look into this further.

cbratschi commented 4 months ago

I created a fresh installation with:

npx create-payload-app@beta --use-npm

In my case the downloaded not-found.js was 3 MB, not the HTML page. This data gets loaded by the first request in dev mode. I am not accessing a missing page, just the Payload admin route.

Will try it again using the latest Payload beta.

cbratschi commented 4 months ago

Here are all the steps performed:

npx create-payload-app@beta --use-npm
- create-payload-app@3.0.0-beta.30
cd project folder
npm run dev
Open http://localhost:3002/admin (or whatever port is being used)
Check developer console

Sorted by file size:

Still getting a 3 MB not-found.js file:

http://localhost:3002/_next/static/chunks/app/(payload)/admin/%5B%5B...segments%5D%5D/not-found.js

payloadcms / payload-3.0-demo