app router - dynamic twitter card image generator file does not return anything if returned div has style: justifyContent: "end".

huilensolis commented 2 months ago

Link to the code that reproduces this issue

https://github.com/Huilensolis/next-js-bug-report

To Reproduce

run the project on dev mode
open in the browser
click on "go to slug"
open dev tools and go to the Element tab

check the head children looking for one that looks like this:

<meta name="twitter:image" content="http://localhost:3000/slug-value/opengraph-image?<image-id-here>">

copy the value of the content attribute and open it on a new tab
the browser won't show anything because the server did not return anything
go to the code and open the opengraph-image.tsx file
change the value of the style justifyContent to "center"
```
import { ImageResponse } from "next/og";
```

// Route segment config export const runtime = "edge";

// Image metadata export const alt = "Huilen Solis's Blog"; export const size = { width: 1200, height: 630, };

export const contentType = "image/png";

// Image generation export default async function Image({ params: { slug }, }: { params: { slug: string }; }) { return new ImageResponse( ( <div style={{ background: "rgb(10 10 10 / 1)", color: "rgb(250 250 250 / 1)", width: "100%", height: "100%", display: "flex", alignItems: "center", -- justifyContent: "start", ++ justifyContent: "center", padding: "2rem", }}

<h1 style={{ textAlign: "start", fontSize: "5rem" }}>{slug}

), // ImageResponse options { // For convenience, we can re-use the exported opengraph-image // size config to also set the ImageResponse's width and height. ...size, }, ); }


7. now refresh the tab of `http://localhost:3000/slug-value/opengraph-image?<image-id-here>`
8. now it works - because you changed the style

note: sometimes the server changes the open graph-image param between renders or changes, so be careful not to look at an old link with an old image id. check the meta element from the page dom tree head before navigating to the open graph image again. the

Current vs. Expected behavior

it should not crash if the styles are different than the example provided on the next js documentation

Provide environment information

Operating system:
 Arch: 86_64
Node: v18.18.0
Next: 14.2.3
React: ^18
React-dom: ^18

Which area(s) are affected? (Select all that apply)

Metadata

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I haven't tried this on production, but I guess it will behave in the same way

icyJoseph commented 2 months ago

Hi,

It is probably a good idea to take this satori as well. https://github.com/vercel/satori/issues

There's a playground there, https://og-playground.vercel.app/:

So, it looks like, you need flex-end, rather. Though it might be worth asking them, why end is not supported, it might have to do with the flex box algorithm.

huilensolis commented 2 months ago

My bad, I should have opened this issue on satori.

glad flex-end works fine.

huilensolis commented 2 months ago

I'm opening an issue on satori :smile:

https://github.com/vercel/satori/issues/618

icyJoseph commented 1 month ago

Awesome, then maybe close this issue. Though end and flex-end are exactly not the same, there are subtle differences, and those might be the reason why satori has decided to not implement that.

github-actions[bot] commented 1 month ago

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

vercel / next.js