Hi Team

This is my tach stack
"@plaiceholder/next": "^3.0.0",
"next": "^14.0.1",
"plaiceholder": "^3.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sharp": "^0.32.6",

I'm trying to get the images to blur on load, ideally at built time.

Based on the docs
https://nextjs.org/docs/app/api-reference/components/image#placeholder

NextJs is recommending to use Plaiceholder to generate the base64 URL
Following the Plaiceholder docs as well
https://plaiceholder.co/docs

Files

// next.config.mjs
// @ts-check
import withPlaiceholder from "@plaiceholder/next";
 
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
    images: {
        deviceSizes: [376, 480, 600, 768, 900, 1024, 1200, 1300],
        formats: ['image/webp'],
        remotePatterns: [
            {
                protocol: 'https',
                hostname: 'media.graphcms.com',
                pathname: '**',
            },
            {
                protocol: 'https',
                hostname: 'media.graphassets.com',
                pathname: '**',
            }
        ],
    }
}
 
export default withPlaiceholder(nextConfig);

// @/utils/useBlurImageData.ts
import { getPlaiceholder } from "plaiceholder";

export default async function useBlurImageData(imageUrl: string) {
  try {
    const buffer = await fetch(imageUrl).then(async (res) => {
      return Buffer.from(await res.arrayBuffer());
    });
    const { base64 } = await getPlaiceholder(buffer);

    return base64;
  } catch (err) {
    err;
  }
}

The image attached is the error generated from this file .next/static/chunks/app/events/page.js

"use strict";
module.exports = require("sharp");

I have also read this feed which is the same set up with a different error..
https://nextjs-forum.com/post/1174662696512274502#message-1174662696512274502


Has anyone experienced this problem?
I'd really appreciate any help on this topic