Next.js Discord

Discord Forum

blurDataUrl in client component

Answered
Giant Angora posted this in #help-forum
Open in Discord
Giant AngoraOP
Hello, I've created a component called BlurData which looks like this:

import getBase64 from '@/utils/getLocalBase64';

import Image from 'next/image';

type BlurDataProps = {
    src: string;
};

export default async function BlurData({ src }: BlurDataProps) {
    const blurDataUrl = await getBase64(src);

    return (
        <Image
            src={src}
            alt="Generated icon"
            height="250"
            width="250"
            priority={true}
            placeholder="blur"
            blurDataURL={blurDataUrl}
        />
    );
}


The problem is when I try to use it in my client component called GenerateIconForm like the following:

<BlurData src={generatedIcon?.imageUrl ?? ''} />


I get an error:

./node_modules/detect-libc/lib/detect-libc.js:6:1
Module not found: Can't resolve 'child_process'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/sharp/lib/utility.js
./node_modules/sharp/lib/index.js
./node_modules/plaiceholder/dist/plaiceholder.esm.js
./src/utils/getLocalBase64.ts
./src/app/components/BlurData.tsx
./src/app/components/GenerateIconForm.tsx

Is there something that I am missing?
Answered by Coffee Coke
Have you wrapped the configuration?
https://plaiceholder.co/docs/plugins/next
View full answer

58 Replies

Giant AngoraOP
I think the problem is that this needs to run in the server
and since I am importing it on the client, it throws error mhm
Coffee Coke
using client-components inside the server component shouldn't create a problem
Giant AngoraOP
Problem is that BlurData is a server component
and GenerateIconForm is a client component
Coffee Coke
try removing getBase64 from the BlurData and see what happens
Giant AngoraOP
Yeah that's the problem
Coffee Coke
could you show me the getLocalBase64 file? to see what's the issue
Giant AngoraOP
import { getPlaiceholder } from 'plaiceholder';

export default 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);
    }
}
I am importing it in my BlurData component which is a server component, then importing BlurData into GenerateIconForm which is a client component
Coffee Coke
is getBase4 inside the client side?
Giant AngoraOP
Wdym? I have this file in /src/utils
Coffee Coke
@/utils/getLocalBase64 file
Giant AngoraOP
Yeah
Coffee Coke
that must be the problem, because according to plaiceholder website quote:
"Plaiceholder" is a suite of server-side functions for creating low quality image placeholders (LQIP).
so, you should use it inside the server-side componentds
you can't use server-side functions on the client-side
Giant AngoraOP
BlurData is a server component
Ah yeah, that's what I thought
Coffee Coke
BlurData yes, but getLocalBase64 isn't
Giant AngoraOP
I am thinking of a workaround here
Api endpoint that returns the blurData?
Coffee Coke
getPlaiceholder is your main concern, it should only be called inside the server-side component, either turn entire getLocalBase64 inside the server-side or create a new component with getPlaiceholder and import it
getPlaiceholder must be on the server-side
also make sure that sharp is installed
Giant AngoraOP
Yeah just installed when y ou told me
Just checked their docs and it must be installed
Coffee Coke
and you still have the issue?
Giant AngoraOP
I am moving the logic to my server component
I did the following, and still getting same error:

import { getPlaiceholder } from 'plaiceholder';

import Image from 'next/image';

type BlurDataProps = {
    src: string;
};

export default async function BlurData({ src }: BlurDataProps) {
    const res = await fetch(src);
    const buffer = await res.arrayBuffer();
    const { base64 } = await getPlaiceholder(Buffer.from(buffer));

    return (
        <Image
            src={src}
            alt="Generated icon"
            height="250"
            width="250"
            priority={true}
            placeholder="blur"
            blurDataURL={base64}
        />
    );
}
this is my BlurData component
Giant AngoraOP
Yep, removing const { base64 } = await getPlaiceholder(Buffer.from(buffer)); works
mhm
@Giant Angora mhm
Coffee Coke
Have you wrapped the configuration?
https://plaiceholder.co/docs/plugins/next
Answer
Giant AngoraOP
oh no
But isn't the problem that I am trying to import a server component into a client component?
Coffee Coke
well, lets if wrapping will work
Giant AngoraOP
import Image from 'next/image';

type BlurDataProps = {
    src: string;
};

export default async function BlurData({ src }: BlurDataProps) {
    const res = await fetch(src);
    const arrayBuffer = await res.arrayBuffer();
    const buffer = Buffer.from(arrayBuffer);
    const base64String = buffer.toString('base64');

    return (
        <Image
            src={src}
            alt="Generated icon"
            height="250"
            width="250"
            priority={true}
            placeholder="blur"
            blurDataURL={base64String}
        />
    );
}


I did the following, and now getting

Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.
alright
Coffee Coke
is BlurData client-component?
I forgot
Giant AngoraOP
nope
server
Coffee Coke
try doing console.log() in the isolated server-side component and see what happens
if it will still work
just the getPlaiceholder component
Giant AngoraOP
now I am getting
ReferenceError: require is not defined
Object.sharp
Idk
Nothing seems to work
Coffee Coke
at least we know that problem is with the plaiceholder
Giant AngoraOP
Yeah, I might find another way of doing this
Too much stuff going on
@Coffee Coke Have you wrapped the configuration? https://plaiceholder.co/docs/plugins/next
Coffee Coke
if there is nothing I can help with, you can mark this as a solution
Giant AngoraOP
How to do that?
Done