Comments (10)
Had the same issue as well, managed to get it answered in the Payload Discord. Thanks to @AlessioGr and @r1tsuu for helping me resolve this issue. I'm just going to leave their comments from the Discord chat here, and claim no credit.
Alessio:
"Hey hey! This is because next automatically bundles all referenced client-side components to the page's JS bundle even if they are not actually used. Thus, even if you only use getPayloadHMR on a page to fetch data, the entirety of payload gets included in the JS.
This will need to be addressed in next, as there is no way to configure that behavior right now. We have an open PR in the next.js repo here: vercel/next.js#65415
Once that's merged this will no longer be an issue! Would be great if you can give that PR an upvote 🙂"
Ritsu even created a gist for quickly patching Next.js in order to fix the bundle sizes. I managed to get it fixed thanks to it.
Gist: https://gist.github.com/r1tsuu/27cb56223d166620966edbcff44e6842
yes patch works like a charm!
from payload.
Had the same issue as well, managed to get it answered in the Payload Discord. Thanks to @AlessioGr and @r1tsuu for helping me resolve this issue. I'm just going to leave their comments from the Discord chat here, and claim no credit.
Alessio:
"Hey hey! This is because next automatically bundles all referenced client-side components to the page's JS bundle even if they are not actually used. Thus, even if you only use getPayloadHMR on a page to fetch data, the entirety of payload gets included in the JS.
This will need to be addressed in next, as there is no way to configure that behavior right now. We have an open PR in the next.js repo here: vercel/next.js#65415
Once that's merged this will no longer be an issue! Would be great if you can give that PR an upvote 🙂"
Ritsu even created a gist for quickly patching Next.js in order to fix the bundle sizes. I managed to get it fixed thanks to it.
Gist: https://gist.github.com/r1tsuu/27cb56223d166620966edbcff44e6842
from payload.
Had the same issue as well, managed to get it answered in the Payload Discord. Thanks to @AlessioGr and @r1tsuu for helping me resolve this issue. I'm just going to leave their comments from the Discord chat here, and claim no credit.
Alessio:
"Hey hey! This is because next automatically bundles all referenced client-side components to the page's JS bundle even if they are not actually used. Thus, even if you only use getPayloadHMR on a page to fetch data, the entirety of payload gets included in the JS.
This will need to be addressed in next, as there is no way to configure that behavior right now. We have an open PR in the next.js repo here: vercel/next.js#65415
Once that's merged this will no longer be an issue! Would be great if you can give that PR an upvote 🙂"
Ritsu even created a gist for quickly patching Next.js in order to fix the bundle sizes. I managed to get it fixed thanks to it.
Gist: https://gist.github.com/r1tsuu/27cb56223d166620966edbcff44e6842yes patch works like a charm!
Thank you, it works perfectly! Just a note: you need to use Node v22 and if you are using src
directory, you need to change next.config.mjs
into:
const nextConfig = {
experimental: {
serverOnlyDependencies: [
resolve(import.meta.dirname, "src", "payload.config.proxy.ts"),
],
},
};
@r1tsuu May I ask how to create a patch for the new canary versions of Next.js, such as 14.3.0-canary.75?
Thanks for your support!
from payload.
I'm seeing the same issue, but simply importing the getPayload
function into a server component, which causes that entire lime green block to get included in the client bundle.
Repro repo is here: https://github.com/richardbutler/payloadcms-bundling-repro
(app)/page.tsx
Root page with no payload imports:- Bundles fine, no issues
(app)/[...slug]/page.tsx
Article page with slug, which usesgetPayload
topayload.find
a list of pages in the(app)/[...slug]/layout.tsx
and also usespayload.find
to get the page itself in(app)/[...slug]/page.tsx
.- Bundles the page and much of the payload admin bundle, including the
(payload)/custom.scss
, which causes the background colour to change on this page only. - I've dropped an
import 'server-only'
into the service making the call, and it doesn't throw the exception that it would if it was being imported by a client component.
- Bundles the page and much of the payload admin bundle, including the
Route (app) Size First Load JS
┌ ○ / 142 B 87.7 kB
├ ○ /_not-found 903 B 88.5 kB
├ ƒ /[...slug] 418 B 357 kB
├ ƒ /admin/[[...segments]] 151 B 446 kB
└ ƒ /api/[...slug] 0 B 0 B
+ First Load JS shared by all 87.6 kB
├ chunks/3182-1b8285e46916339b.js 33.6 kB
├ chunks/4bd1b696-1585789b00318d32.js 51 kB
└ other shared chunks (total) 2.95 kB
○ (Static) prerendered as static content
ƒ (Dynamic) server-rendered on demand
✨ Done in 28.17s.
This only happens on production builds, not on development builds, both standard Next builds and standalone Next builds.
Reference: bundle analyzer (app)/[...slug]/page.tsx
Reference: bundle analyzer (app)/page.tsx
from payload.
Had the same issue as well, managed to get it answered in the Payload Discord. Thanks to @AlessioGr and @r1tsuu for helping me resolve this issue. I'm just going to leave their comments from the Discord chat here, and claim no credit.
Alessio:
"Hey hey! This is because next automatically bundles all referenced client-side components to the page's JS bundle even if they are not actually used. Thus, even if you only use getPayloadHMR on a page to fetch data, the entirety of payload gets included in the JS.
This will need to be addressed in next, as there is no way to configure that behavior right now. We have an open PR in the next.js repo here: vercel/next.js#65415
Once that's merged this will no longer be an issue! Would be great if you can give that PR an upvote 🙂"
Ritsu even created a gist for quickly patching Next.js in order to fix the bundle sizes. I managed to get it fixed thanks to it.
Gist: https://gist.github.com/r1tsuu/27cb56223d166620966edbcff44e6842yes patch works like a charm!
Thank you, it works perfectly! Just a note: you need to use Node v22 and if you are using
src
directory, you need to changenext.config.mjs
into:const nextConfig = { experimental: { serverOnlyDependencies: [ resolve(import.meta.dirname, "src", "payload.config.proxy.ts"), ], }, };@r1tsuu May I ask how to create a patch for the new canary versions of Next.js, such as 14.3.0-canary.75?
Thanks for your support!
you can change the patch key in the package json (and pray that nothing was changed with this version in the patch diff context)
"patchedDependencies": {
"[email protected]": "patches/[email protected]"
}
from payload.
@r1tsuu Legend. This works a charm, I owe you beer.
@domenico-ruggiano I manually applied the same changes on Next 14.2.3 (not canary) using yarn patch
(instructions here). I'm also using Node 20 and everything is fine. I've added my patch file to the gist.
from payload.
Love to see everyone getting crafty in this interim period 👍
from payload.
@r1tsuu Legend. This works a charm, I owe you beer.
@domenico-ruggiano I manually applied the same changes on Next 14.2.3 (not canary) using
yarn patch
(instructions here). I'm also using Node 20 and everything is fine. I've added my patch file to the gist.
@richardbutler my bad, I was using node v20.9.0. You're right it works perfectly also using Node v20 lts/iron.
Thanks for the info, I know how to apply a patch with yarn or npm. I'm just curious, how do you generated the git diff file? I tried cloning the repo with the patch and generating the diff file by comparing the pull request with the released version in the official Next.js repository (or visiting https://github.com/vercel/next.js/compare/canary...jmikrut:next.js:feat/%2350285-server-only-deps.diff), but I couldn't manage it because the differences were calculated on the source code and not on the "/dist/build/" folder.
from payload.
@denolfe after upgrading payload to version v3.0.0-beta.49 (I'm currently on v3.0.0-beta.52) the patch doesn't work anymore.
After build, I'm getting this error:
Error: Could not find the module "./node_modules/.pnpm/@[email protected]_@[email protected][email protected]_bcseew2il5vot4h3q2q2cxajke/node_modules/@payloadcms/richtext-lexical/dist/exports/client/index.js#IndentFeatureClientComponent" in the React Client Manifest. This is probably a bug in the React Server Components bundler.
at ek (./node_modules/.pnpm/[email protected][email protected][email protected]._vbcca4r3lbbuwgj3z4anxkkfoa/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:84:14370)
....
from payload.
@domenico-ruggiano The patch is not officially supported. It will need to be redone by the author.
from payload.
Related Issues (20)
- SVG favicon not supported by Safari
- Overwriting file uploads doesn't update URL HOT 2
- req.locale incorrect for access control functions HOT 1
- No additional image sizes are generated on image upload while using "imageSizes" HOT 2
- Update Unlock Documentation to Include Email Parameter
- 504 Gateway Timeout with Form Fields large data
- [UI] Document deletion modal: Content misalignment HOT 1
- Relationship field is of type number | MyType HOT 1
- Next.js Middleware not working in Custom Server example after build process
- Image metadata stripped from image when using upload.imageSizes
- Type signature mismatch between auth email configurations HOT 1
- Fields in groups ignore typical table naming convention (postgres)
- Blocks in blocks not possible in v3 with Postgres HOT 1
- Type collision with generated types HOT 6
- Errors given by local api do not match exported errors
- Bug with Lexical Html converter including Fix
- Disabling auth local strategy causes /api/users/me to no longer work
- Node.js API not supported in Edge Runtime warnings when using basic Next.js middleware
- Image resize bug - filename conflicts when two `imageSizes` configs are of the same dimensions
- Nested blocks error with localization on Postgres DB
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from payload.