next.js: next/server ImageResponse throws `Error: Expected

to have explicit "display: flex"...` when mixing variables and text

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

1. Deploy the mentioned repo to Vercel or locally with npm run dev
2. Browse to https://<domain>/image2
3. 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(externalApi) simply not supported?

Expected Behavior

The behaviour I expect is for the await fetch(...) to finish, and then the ImageResponse will be returned, with the data from the fetch.

Which browser are you using? (if relevant)

Chrome 112.0.5615.50 (but not relevant)

How are you deploying your application? (if relevant)

Vercel