Uncaught ReferenceError: require is not defined

[Waseemrajashaik]

I am trying to use plaiceholder library in Nextjs (use Macbook for coding)

All packages

{
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@coreui/react": "^5.0.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.14",
"@mui/material": "^5.15.14",
"@plaiceholder/next": "^3.0.0",
"@radix-ui/react-collapsible": "^1.0.3",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tooltip": "^1.0.7",
"@reduxjs/toolkit": "^2.2.2",
"@svgr/webpack": "^8.1.0",
"axios": "^1.6.8",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"jsonwebtoken": "^9.0.2",
"jwk-to-pem": "^2.0.5",
"keycloak-js": "^24.0.2",
"moment": "^2.30.1",
"next": "14.1.1",
"plaiceholder": "^3.0.0",
"react": "^18",
"react-dom": "^18",
"react-redux": "^9.1.0",
"sharp": "^0.33.3",
"tailwind-merge": "^2.2.2",
"tailwindcss-animate": "^1.0.7",
"use-debounce": "^10.0.0"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.1.4",
"postcss": "^8",
"tailwindcss": "^3.3.0",
"typescript": "^5"
}
}

using code

import { getPlaiceholder } from "plaiceholder";
import { Course } from "@/interfaces/course.interface";

async function getBase64(imageUrl: string) {
try {
const res = await fetch(imageUrl);
if (!res.ok) {
throw new Error(Failed to fetch image: ${res.status} ${res.statusText});
}
const buffer = await res.arrayBuffer();
const { base64 } = await getPlaiceholder(Buffer.from(buffer));
return base64;
} catch (e) {
if (e instanceof Error) console.log(e.stack);
}
}

export default async function addBlurredDataUrls(courses: Course[]) {
const base64Promises = courses.map((course) => getBase64(course.sas_key));
const base64Results = await Promise.all(base64Promises);
const photosWithBlur: Course[] = courses.map((course, i) => {
course.blurBase64 = base64Results[i];
return course;
});
return photosWithBlur;
}

Error:

Uncaught ReferenceError: require is not defined
at Object.sharp (page.js:18:1)
at options.factory (webpack.js?v=1712641097110:721:31)
at webpack_require (webpack.js?v=1712641097110:37:33)
at fn (webpack.js?v=1712641097110:376:21)
at eval (plaiceholder.esm.js:5:63)
at (:3000/app-pages-browser)/node_modules/.pnpm/plaiceholder@3.0.0_sharp@0.33.3/node_modules/plaiceholder/dist/plaiceholder.esm.js (http://localhost:3000/_next/static/chunks/app/page.js:4359:1)
at options.factory (webpack.js?v=1712641097110:721:31)
at webpack_require (webpack.js?v=1712641097110:37:33)
at fn (webpack.js?v=1712641097110:376:21)
at eval (dynamic_image.tsx:5:70)
at (:3000/app-pages-browser)/components/dynamic_image.tsx (http://localhost:3000/_next/static/chunks/app/page.js:2908:1)
at options.factory (webpack.js?v=1712641097110:721:31)
at webpack_require (webpack.js?v=1712641097110:37:33)
at fn (webpack.js?v=1712641097110:376:21)
at eval (course_list.tsx:7:72)
at (:3000/app-pages-browser)/components/course_list.tsx (http://localhost:3000/_next/static/chunks/app/page.js:2897:1)
at options.factory (webpack.js?v=1712641097110:721:31)
at webpack_require (webpack.js?v=1712641097110:37:33)
at fn (webpack.js?v=1712641097110:376:21)
at eval (page.tsx:11:81)
at (:3000/app-pages-browser)/app/page.tsx (http://localhost:3000/_next/static/chunks/app/page.js:2875:1)
at options.factory (webpack.js?v=1712641097110:721:31)
at webpack_require (webpack.js?v=1712641097110:37:33)
at fn (webpack.js?v=1712641097110:376:21)
at requireModule (react-server-dom-webpack-client.browser.development.js:156:23)
at initializeModuleChunk (react-server-dom-webpack-client.browser.development.js:1357:1)
at parseModelString (react-server-dom-webpack-client.browser.development.js:1665:1)
at Object.eval (react-server-dom-webpack-client.browser.development.js:2018:1)
at JSON.parse ()
at parseModel (react-server-dom-webpack-client.browser.development.js:2010:1)
at initializeModelChunk (react-server-dom-webpack-client.browser.development.js:1325:1)
at readChunk (react-server-dom-webpack-client.browser.development.js:1163:1)
at reconcileChildFibersImpl (react-dom.development.js:9854:1)
at reconcileChildFibers (react-dom.development.js:9912:1)
at reconcileChildren (react-dom.development.js:15627:1)
at replayFunctionComponent (react-dom.development.js:16236:1)
at replaySuspendedUnitOfWork (react-dom.development.js:25695:1)
at renderRootConcurrent (react-dom.development.js:25467:1)
at performConcurrentWorkOnRoot (react-dom.development.js:24432:1)
at workLoop (scheduler.development.js:256:34)
at flushWork (scheduler.development.js:225:14)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:21)

[lovell]

sharp does not work in a web browser.