Hey everyone would love your help on this.

I'm currently trying to import the fs module to read my files so I can generate a base64 image placeholder to lazy load my images. It's my first time trying to implement the Plaiceholder package to lazy load my images.

I get the following error when trying to import

import fs from "node:fs/promises";

:

Module build failed: UnhandledSchemeError: Reading from "node:fs/promises" 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.

I am currently using the latest version of Next.js and Node.js, so I expecting this to work right out of the box.

The file I am trying to import the modules in:

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

export default async function StaticBlur() {
  const buffer = await fs.readFile(`./public${src}`);

  const { base64 } = await getPlaiceholder(buffer);

  return (
    <Image
      src={src.replace("./public", "")}
      fill
      alt="image"
      placeholder="blur"
      blurDataURL={base64}
    />
  );
}

Next.js version: 14.1.3
Plaiceholder/next version: 3.0.0
Node version: 21.7.1

Thanks for your help in advance : )