next/server ImageResponse throws `Error: Expected <div> to have explicit "display: flex"...` when mixing variables and text

Why this is a good first issue

The issue involves unexpected CSS behavior in ImageResponse when mixing variables and text.

AI Summary

The issue occurs when using `ImageResponse` from `next/server` with asynchronous operations, causing a CSS error related to `display: flex`. The problem is reproducible and appears to be related to how styles are applied in the edge runtime environment. The scope is somewhat clear, but the exact fix requires understanding both Next.js internals and CSS handling in the edge runtime.

Issue Description

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
Binaries:
  Node: 16.13.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.3.1-canary.4
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/leonlarsson/og-test

To Reproduce

Deploy the mentioned repo to Vercel or locally with npm run dev
Browse to https://<domain>/image2
Check the Vercel logs or local terminal and see issue

For a working version (without any await or fetch), browse to https://<domain>/works

Describe the Bug

Please see my first comment that better describes what the bug is. It has nothing to do with fetch and await specifically.

Using ImageResponse from next/server produced an error if I await a fetch before returning new ImageResponse

Error: Expected <div> to have explicit "display: flex" or "display: none" if it has more than one child node.
    at (node_modules/next/dist/compiled/@vercel/og/index.edge.js:15573:12)
    at (node_modules/next/dist/compiled/@vercel/og/index.edge.js:15577:18)
    at (node_modules/next/dist/compiled/@vercel/og/index.edge.js:16503:11)
    at (node_modules/next/dist/compiled/@vercel/og/index.edge.js:18064:14)
    at (node_modules/next/dist/compiled/@vercel/og/index.edge.js:18103:24)

As seen in https://github.com/leonlarsson/og-test/blob/main/app/image2/route.tsx, this shouldn't happen.

I have tried this without any awaits or fetches, and it works as expected (https://github.com/leonlarsson/og-test/blob/main/app/works/route.tsx)

Is this expected to work or is `await fetch(externa

GitHub Labels

bug