How to use filesystem / node-only packages in server components?

[jamesvclements]

If a component isn't marked with use client, shouldn't it be able to use server-side packages? How so, and how do we declare a component to be server-only?

For example, I want an image component that uses a dependency that relies on the filesystem to generate placeholders:

import fs from "node:fs/promises";
import path from "node:path";
import Image, { ImageProps } from "next/image";
import { getPlaiceholder } from "plaiceholder";

export default async function ImageWithPlaceholder({
  src,
  ...rest
}: ImageProps) {
  const file = await fs.readFile(path.join("./public", src));
  const { base64 } = await getPlaiceholder(file);

  return (
    <Image src={src} placeholder="blur" blurDataURL={base64} {...rest}></Image>
  );
}

However, this doesn't work, because "fs" is undefined.

[icyJoseph]

Hi,

You can do something called, poisoning to prevent accidental imports: https://nextjs.org/docs/getting-started/react-essentials#the-server-only-package

Also use client means that the JS that drives the component is sent to the client for hydration. There's a client-only poison you can use.

Everything is a server component by default.

I think the problem you have is that a use client component is directly importing your ImageWithPlaceholder - when a use client component enters the React tree, all of its direct children are client components. Otherwise, everything is a Server Component by default.

What you can do is use composition, at some layout/page level, using this pattern: https://nextjs.org/docs/getting-started/react-essentials#recommended-pattern-passing-server-components-to-client-components-as-props that way React creates a "slot" where the server component results are placed.

[jamesvclements]

Thank you! This finally made it click for me. I didn't realize all of the other imports inside a client component become client components as well. Using the composition approach fixed my issue.

[jcubic]

The docs don't include this information anymore.

[icyJoseph]

The docs don't include this information anymore.

It's here now, https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#interleaving-server-and-client-components

[jcubic]

Yes, thanks already found it after commenting.