blurDataUrl in client component | Next.js | Page 1

summer summit Jun 4, 2024, 1:24 AM

#

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:

```js
<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?

shut zodiacBOT Jun 4, 2024, 1:24 AM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

fading cloak Jun 4, 2024, 1:43 AM

#

summer summit Hello, I've created a component called `BlurData` which looks like this: ```js ...

try:npm install sharp plaiceholder if it doesn't work, problem could be inside getBase64

summer summit Jun 4, 2024, 1:45 AM

#

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

fading cloak Jun 4, 2024, 1:47 AM

#

using client-components inside the server component shouldn't create a problem

summer summit Jun 4, 2024, 1:48 AM

#

Problem is that BlurData is a server component

#

and GenerateIconForm is a client component

fading cloak Jun 4, 2024, 1:50 AM

#

try removing getBase64 from the BlurData and see what happens

summer summit Jun 4, 2024, 1:50 AM

#

Yeah that's the problem

fading cloak Jun 4, 2024, 1:51 AM

#

could you show me the getLocalBase64 file? to see what's the issue

summer summit Jun 4, 2024, 1:52 AM

#


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

fading cloak Jun 4, 2024, 1:54 AM

#

is getBase4 inside the client side?

summer summit Jun 4, 2024, 1:55 AM

#

Wdym? I have this file in /src/utils

fading cloak Jun 4, 2024, 1:55 AM

#

@/utils/getLocalBase64 file

summer summit Jun 4, 2024, 1:55 AM

#

Yeah

fading cloak Jun 4, 2024, 1:56 AM

#

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

summer summit Jun 4, 2024, 1:56 AM

#

BlurData is a server component

#

Ah yeah, that's what I thought

fading cloak Jun 4, 2024, 1:56 AM

#

BlurData yes, but getLocalBase64 isn't

summer summit Jun 4, 2024, 1:56 AM

#

I am thinking of a workaround here

#

Api endpoint that returns the blurData?

fading cloak Jun 4, 2024, 1:58 AM

#

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

summer summit Jun 4, 2024, 1:59 AM

#

Yeah just installed when y ou told me

#

Just checked their docs and it must be installed

fading cloak Jun 4, 2024, 2:00 AM

#

and you still have the issue?

summer summit Jun 4, 2024, 2:00 AM

#

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

fading cloak Jun 4, 2024, 2:08 AM

#

summer summit I did the following, and still getting same error: ``` import { getPlaiceholder...

try removing getPlaiceholder to see if something changes

summer summit Jun 4, 2024, 2:10 AM

#

Yep, removing const { base64 } = await getPlaiceholder(Buffer.from(buffer)); works

#

mhm

fading cloak Jun 4, 2024, 2:12 AM

#

summer summit mhm

Have you wrapped the configuration?
https://plaiceholder.co/docs/plugins/next

Next.js | Plaiceholder

Beautiful image placeholders, without the hassle.

summer summit Jun 4, 2024, 2:15 AM

#

oh no

#

But isn't the problem that I am trying to import a server component into a client component?

fading cloak Jun 4, 2024, 2:16 AM

#

well, lets if wrapping will work

summer summit Jun 4, 2024, 2:16 AM

#


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

fading cloak Jun 4, 2024, 2:16 AM

#

is BlurData client-component?

#

I forgot

summer summit Jun 4, 2024, 2:16 AM

#

nope

#

server

fading cloak Jun 4, 2024, 2:18 AM

#

try doing console.log() in the isolated server-side component and see what happens

#

if it will still work

#

just the getPlaiceholder component

summer summit Jun 4, 2024, 2:21 AM

#

now I am getting

#

ReferenceError: require is not defined

#

Object.sharp

#

Idk

#

Nothing seems to work

fading cloak Jun 4, 2024, 2:23 AM

#

at least we know that problem is with the plaiceholder

summer summit Jun 4, 2024, 2:24 AM

#

Yeah, I might find another way of doing this

#

Too much stuff going on

fading cloak Jun 4, 2024, 2:25 AM

#

fading cloak Have you wrapped the configuration? https://plaiceholder.co/docs/plugins/next

if there is nothing I can help with, you can mark this as a solution

summer summit Jun 4, 2024, 2:29 AM

#

How to do that?

shut zodiacBOT Jun 4, 2024, 2:30 AM

#

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1247360226223718432 message)

#blurDataUrl in client component