Next.js Discord

Discord Forum

Remove style from ImageResponse

Unanswered
Tonkinese posted this in #help-forum
Open in Discord
TonkineseOP
Is there any way removing that error?

47 Replies

@Tonkinese Is there any way removing that error?
Ray
use <></> instead of <div>?
TonkineseOP
Okay danks
But for everything?
@Tonkinese But for everything?
Ray
no just the outer one
<>
  <div></div>
  <div></div>
  <div></div>
</>
TonkineseOP
okay
@Ray ts <> <div></div> <div></div> <div></div> </>
TonkineseOP
Doesnt help
Ray
still error?
@Ray still error?
TonkineseOP
yes
Ray
can you show the code?
TonkineseOP
import { ImageResponse } from "next/og";
import { getGuild } from "@lib/server/Db";

export const size = {
  width: 1230,
  height: 630,
};
export const contentType = "image/png";

export default async function og({ params }) {
  const guild = await getGuild(params.id);
  const imageurl = guild?.icon
    ? `https://cdn.discordapp.com/icons/${guild?.guild_id}/${guild?.icon}.png?size=4096`
    : "https://cdn.modguard.xyz/branding/logo/transparent/logo.png";
  const text = guild?.name ? guild?.name : guild?.id;

  return new ImageResponse(
    (
      <>
        <div className="bg-white py-16 sm:py-24">
          <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div className="relative overflow-hidden bg-gray-900 px-6 py-20 shadow-xl sm:rounded-3xl sm:px-10 sm:py-24 md:px-12 lg:px-20">
              <img
                className="absolute inset-0 h-full w-full object-cover brightness-150 saturate-0"
                src="https://images.unsplash.com/photo-1601381718415-a05fb0a261f3?ixid=MXwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8ODl8fHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1216&q=80"
                alt=""
              />
              <div className="absolute inset-0 bg-gray-900/90 mix-blend-multiply" />
              <div
                className="absolute -left-80 -top-56 transform-gpu blur-3xl"
                aria-hidden="true"
              >
                <div
                  className="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-r from-[#ff4694] to-[#776fff] opacity-[0.45]"
                  style={{
                    clipPath:
                      "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
                  }}
                />
              </div>
              <div
                className="hidden md:absolute md:bottom-16 md:left-[50rem] md:block md:transform-gpu md:blur-3xl"
                aria-hidden="true"
              >
                <div
                  className="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-r from-[#ff4694] to-[#776fff] opacity-25"
                  style={{
                    clipPath:
                      "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
                  }}
                />
              </div>
              <div className="relative mx-auto max-w-2xl lg:mx-0">
                <img
                  className="h-12 w-auto"
                  src="https://tailwindui.com/img/logos/workcation-logo-white.svg"
                  alt=""
                />
                <figure>
                  <blockquote className="mt-6 text-lg font-semibold text-white sm:text-xl sm:leading-8">
                    <p>
                      “Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      Nemo expedita voluptas culpa sapiente alias molestiae.
                      Numquam corrupti in laborum sed rerum et corporis.”
                    </p>
                  </blockquote>
                  <figcaption className="mt-6 text-base text-white">
                    <div className="font-semibold">Judith Black</div>
                    <div className="mt-1">CEO of Workcation</div>
                  </figcaption>
                </figure>
              </div>
            </div>
          </div>
        </div>
      </>
    ),
    size,
  );
}
I bought that Tailwind Component for 350€ and wanted to make the og:image out of this
@Ray can you show the code?
TonkineseOP
Thats how i that the usage of ImageResponse on yt
Ray
wait does tailwind class work in there?
I don't think it does
@Ray wait does tailwind class work in there?
TonkineseOP
it works in there
i am pretty sure
Ray
can you try return <div className="bg-red-500 />
@Ray can you try return `<div className="bg-red-500 />`
TonkineseOP
Going to test that right now
And do you know, why the component is below that?
the red line is a progress bar
@Ray Made using framer motion
This is the image
The component/children is higher than the loader defined in the layout.tsx
Ray
the progress bar defined in layout.tsx and has fixed class?
TonkineseOP
Yes
Ray
you would need to add padding or margin of the height of the progress bar to the children
TonkineseOP
I am going to test the other thing
@Ray can you try return `<div className="bg-red-500 />`
TonkineseOP
Well well well
That doesnt work
Ray
yes it wont work
it can't load the css file
TonkineseOP
So means doing it all in css
Ray
yea
in style props
TonkineseOP
Thats shit but i have to acceppt it
TonkineseOP
@Ray Is a suspense in a suspense possible or only for a whole page
Ray
yes its possible
@Tonkinese Is there any way removing that error?
joulev
satori (next/og) supports tailwind but:

* you must use tw rather than className
* loading custom config (e.g. your tailwind.config.js) is at least as of one month ago impossible
* you are drawing on a 1200x630 image, your normal 16px text will show up as tiny. so you need to change all size-related utilities. 60px+ font sizes are normal

basically you have to rewrite the entire component based on these constraints. your existing components intended for react are not going to work in next/og
that error is because if a <div> has more than one child node, satori enforces that it must be a flex, or hidden with hidden/display: none. satori only supports display: flex and display: none and the default value of display.
TonkineseOP
@joulev Hey, so i am using tw now and it still gives me the error and i didnt understand what to do now
And the satori documentation