Module not found: Can't resolve 'fs'

[lyric dirge]

im facing this error when trying to use the local api to access globals for my components
i used the create command to install payload into an existing next js react site

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.7.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.2/node_modules/payload/dist/uploads/getImageSize.js
./node_modules/.pnpm/payload@3.7.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.2/node_modules/payload/dist/uploads/generateFileData.js
./node_modules/.pnpm/payload@3.7.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.2/node_modules/payload/dist/collections/operations/create.js
./node_modules/.pnpm/payload@3.7.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.2/node_modules/payload/dist/index.js
./lib/getGlobal.ts
./components/hero.tsx
./app/(app)/page.tsx

[vale plinth]

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:

• Local API - Accessing Payload - Importing it
• Installation - Adding to an existing app
• The Payload Config - Config Location

Community-Help:

• Cant resolve 'fs'
• Server component inside client component - payload 3.0
• hook is not a function

[lyric dirge]

this is my getGlobal.ts, copied from the template:

import type { Config } from '@/payload-types'

import configPromise from '@payload-config'
import { getPayload } from 'payload'
import { unstable_cache } from 'next/cache'

type Global = keyof Config['globals']

async function getGlobal(slug: Global, depth = 0) {
  const payload = await getPayload({ config: configPromise })

  const global = await payload.findGlobal({
    slug,
    depth,
  })

  return global
}

/**
 * Returns a unstable_cache function mapped with the cache tag for the slug
 */
export const getCachedGlobal = (slug: Global, depth = 0) =>
  unstable_cache(async () => getGlobal(slug, depth), [slug], {
    tags: [`global_${slug}`],
  })

here is how im calling the getglobals function for my component:

interface HeroProps {
  badge: string;
  title: string;
  description: string;
  buttonText: string;
  videoPath: string;
}

const heroData = await getCachedGlobal('hero', 1)() as HeroProps

here is my Hero global:

import type { GlobalConfig } from 'payload'

export const Hero: GlobalConfig = {
  slug: 'hero',
  fields: [
    {
      name: 'title',
      type: 'text',
      required: true,
    },
    {
      name: 'description',
      type: 'text',
      required: true,
    },
    {
      name: 'buttonText',
      type: 'text',
      required: true,
    },
    {
      name: 'videoPath',
      type: 'upload',
      relationTo: 'media',
      required: true,
    },
    {
      name: 'badge',
      type: 'text',
      required: true,
    },
  ],
}

and here is my payload config:

import { mongooseAdapter } from '@payloadcms/db-mongodb'
import { lexicalEditor } from '@payloadcms/richtext-lexical'
import path from 'path'
import { buildConfig } from 'payload'
import { fileURLToPath } from 'url'
import sharp from 'sharp'
import { s3Storage } from '@payloadcms/storage-s3'

import { Hero } from './collections/Hero'
import { Users } from './collections/Users'
import { Media } from './collections/Media'

const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)

export default buildConfig({
  admin: {
    user: Users.slug,
    importMap: {
      baseDir: path.resolve(dirname),
    },
  },
  collections: [Users, Media],
  globals: [Hero],
  editor: lexicalEditor(),
  secret: process.env.PAYLOAD_SECRET || '',
  typescript: {
    outputFile: path.resolve(dirname, 'payload-types.ts'),
  },
  db: mongooseAdapter({
    url: process.env.DATABASE_URI || '',
  }),
  sharp,
  plugins: [
    // s3Storage({
    //   collections: {
    //     media: true,
    //   },
    //   bucket: process.env.AWS_S3_BUCKET || '',
    //   config: {
    //     credentials: {
    //       accessKeyId: process.env.AWS_S3_ACCESS_KEY_ID || '',
    //       secretAccessKey: process.env.AWS_S3_SECRET_ACCESS_KEY || '',
    //     },
    //     region: process.env.AWS_S3_REGION || '',
    //   },
    //   disableLocalStorage: true,
    // }),
  ],
})

i'm not sure where i went wrong or if im doing something wrong, but i've gone thru the standard troubleshooting steps in other issue threads and they did not resolve it or are out of date

i'd appreciate any guidance! thank you