On a payload configuration prespective everything is working fine. Now, my painpoint is when i try to display the payload content on my website on a server component inside a client component.

My page,jsx is currently as a "use client", and inside of it i want to display a component that renders some payload globals text.

Inside of the server component i use a custom hook to get the globals data:

const payload = await getPayloadHMR({ config })

const promises = slugs.map((slug) => payload.findGlobal({ slug, locale }))

const results = await Promise.all(promises)

With this server inside client component it throws this error:

Module build failed: UnhandledSchemeError: Reading from "node:buffer" is not handled by plugins (Unhandled scheme).

Webpack supports "data:" and "file:" URIs by default.

You may need an additional plugin to handle "node:" URIs.

Import trace for requested module:

node:buffer

./node_modules/file-type/browser.js

./node_modules/payload/dist/uploads/getFileByPath.js

./node_modules/payload/dist/collections/operations/local/create.js

./node_modules/payload/dist/collections/operations/local/index.js

./node_modules/payload/dist/index.js

./node_modules/@payloadcms/next/dist/utilities/getPayloadHMR.js

./node_modules/@payloadcms/next/dist/exports/utilities.js

./src/app/(app)/services/payload/FetchGlobals.jsx

./src/app/(app)/hooks/useFetchAboutContent.jsx

./src/app/(app)/page.jsx

⚠ ./src/app/(app)/page.jsx

Attempted import error: 'useFetchAboutContent' is not exported from './hooks/useFetchAboutContent' (imported as 'useFetchAboutContent').

Anyone can help me to understand what i'm doing wrong? it seems that i can't use the getPayloadHMR on a server component inside. if so, what is the approach here to make things work?

Thanks a looot

tyteen4a03last year
You set your route to a client component route, therefore you would lose payload

Is there a reason why it must be a client component?
berthovenzambezelast year
well, the idea would have stuff like gsap/framer animations applied to the structure of the page
tyteen4a03last year
You can refactor your tree so that page.tsx is still a server component where the fetching can happen, then a client component within it to do framer stuff
berthovenzambezelast year
so, let me see if understand correctly: i would create a server component page that would handle all the fetching for all the pages, and then would pass to my client component that would have all the parallax effects and stuff

is that it?
tyteen4a03last year
Yep

I also think in this scenario, data fetching in a server component in client component in server component would also work ok
berthovenzambezelast year
so this means that i could still have server components inside a client component, that would also be able to call getPayloadHMR ?

or m i missunderstooding ? sorry about these noob questions XD
tyteen4a03last year
My theory is as long as the root (i.e. the page itself) is a server component, the rest of the server components in the tree will render on server correctly
berthovenzambezelast year
i will do a test on that theory than XD

hey. i've changed my page to run at server. i've created a component called Landing that now contains all the logic that we had on the page.jsx (all the framer stuff). inside of that Landing component i have another server component that get the content from payload using the getPayloadHMR. it throws an error:

Module not found: Can't resolve 'fs'

Did you mean './fs'?

Requests that should resolve in the current directory need to start with './'.

Requests that start with a name are treated as module requests and resolve within module directories (node_modules, C:\Users\franc\Desktop\prj\payload3).

it' seems that it doesn't work
tyteen4a03last year
is your tsconfig.json the same as Payload's?
berthovenzambezelast year
@114557048678514693

i think so
tyteen4a03last year
let me do an experiment on my project rq
berthovenzambezelast year
pfff

you are like an angel, hahaha
tyteen4a03last year
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#unsupported-pattern-importing-server-components-into-client-components
berthovenzambezelast year
FUUUUCKKK yeeaaahh

maaaan

it worked

skill issue

thanks a lot

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.