Plaiceholder Issues with Remote blurDataUrl NextJS 14

Question

This is my tech 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 I'm 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

Error Message Image

Where error is occurring on line 18:

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

The reason require is undefined is because the @plaiceholder/next package requires that the next.config.js become a CommonJS module instead of ESM, so if it's still ESM then require will be undefined

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

So solve this I have also tried:

• Next 13
• Using a different file type to .mjs
• Changing the required() to import statements

Answer 1

For me the solution was by turning base64 function to server action