Trying to use Payload Local API with Next.js server components

[joncys]

Hey there,

I've set up Payload w/ Next.js like in the nextjs-custom-server example. Everything works fine and I really like the experience.

Albeit, I get an error when trying to use the local API inside next.js server components:

./node_modules/payload/node_modules/sharp/build/Release/sharp-darwin-arm64v8.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

I did some digging and It's probably because the sharp dependency does not work within the browser environment. I tried a few proposed solutions, like but to no avail.

I see that the example in the custom server repo still uses the /pages directory structure and not /app, so I assume the app router and server components are not yet supported / thought of.
I have no issue reverting back to and using the REST API.

I am just curious if someone has run into this particular problem or has a working solution.
Also, this could be a heads-up when making the next release compatible with server side components.

Thanks for the great tool and all your hard work peeps! ♥️

[sannajammeh]

Wherever you're using payload, you'll need the Node runtime for now.

// In your server component or route handler

export const runtime = "nodejs"

There is one other thing you could try:

// in next.config.js/mjs

{
  experimental: {
    serverComponentsExternalPackages: ["payload", "sharp"],
  },
}

For the next config option, try enabling both runtime edge and runtime nodejs and see what works.

The problem here is that sharp doesn't ship browser/WASM bundle. using serverComponentsExternalPackages should be able to disable the deps optimization allowing you to run payload without sharp executing. If this doesn't work, then what happens is payload is loading sharp pre-emptively, meaning its being loaded regardless of it being used or not.

If the above doesn't work, try this. I am not too familiar with payload internals, but if it doesn't call sharp during local API usage then you could leverage SWC transforms to alias it directly:

1. Create a workspace package in your workspace (or create an internal workspace in your project leveraging your package manager)
2. Create a package and call it my-sharp-shim
3. Install that package as a dependency
4. Ship only CJS and export an empty module in my-sharp-shim

// in next.config.js/mjs
modularizeImports: {
    'sharp': {
      transform: 'my-sharp-shim',
      skipDefaultConversion: true,
    },
  },