Next.js Build Error: Cant Resolve fs Module

[faint spoke]

Idk why i get this error whenever i try to get the content through getPayload function directly on client-side!

Build Error
Next.js (15.1.6) out of date (learn more)
Failed to compile

../../node_modules/.pnpm/image-size@1.2.0/node_modules/image-size/dist/index.js:4:1
Module not found: Can't resolve 'fs'
  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | exports.types = exports.setConcurrency = exports.disableTypes = exports.disableFS = exports.imageSize = void 0;
> 4 | const fs = require("fs");
    | ^
  5 | const path = require("path");
  6 | const queue_1 = require("queue");
  7 | const index_1 = require("./types/index");

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../../node_modules/.pnpm/payload@3.23.0_graphql@16.10.0_monaco-editor@0.52.2_react-dom@19.0.0_react@19.0.0__react@19.0.0_typescript@5.7.3/node_modules/payload/dist/uploads/getImageSize.js
../../node_modules/.pnpm/payload@3.23.0_graphql@16.10.0_monaco-editor@0.52.2_react-dom@19.0.0_react@19.0.0__react@19.0.0_typescript@5.7.3/node_modules/payload/dist/uploads/generateFileData.js
../../node_modules/.pnpm/payload@3.23.0_graphql@16.10.0_monaco-editor@0.52.2_react-dom@19.0.0_react@19.0.0__react@19.0.0_typescript@5.7.3/node_modules/payload/dist/collections/operations/create.js
../../node_modules/.pnpm/payload@3.23.0_graphql@16.10.0_monaco-editor@0.52.2_react-dom@19.0.0_react@19.0.0__react@19.0.0_typescript@5.7.3/node_modules/payload/dist/index.js
./src/lib/payload.ts
./src/app/(frontend)/(components)/navigation/hooks/useNavigation.ts
./src/app/(frontend)/(components)/navigation/index.tsx
./src/app/(frontend)/(components)/wrapper/index.tsx
This error occurred during the build process and can only be dismissed by fixing the error.

[surreal burrow]

Original message from @regal hollow - Moved from #general message

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Form Builder Plugin - Troubleshooting - SendGrid 403 Forbidden Error
• Production Deployment - Basics
• The Admin Panel - Admin Options
• Stripe Plugin - Examples

Community-Help:

• Cannot resolve 'fs'
• Fetch user from custom endpoint

[nimble coyote]

getPayload function directly on client-side!
Payload and getPayload can't be used clientside, this must strictly remain on the server

If you need the BasePayload instance, I would recommend wrapping your client component in a RSC and using payload there instead, and then just pass the props down