Open graph image. Failed to parse linear-gradient with oklch values.

[samcx]

Discussed in #636

^{Originally posted by firmart September 16, 2024}

Link to the code that reproduces this issue

codesandbox

To Reproduce

1. Start the app npm run dev
2. Go to <baseURL>/test

Current vs. Expected behavior

ImageResponse failed to parse background: linear-gradient(15deg, oklch(65.69% 0.196 275.75), oklch(74.8% 0.26 342.55), oklch(74.51% 0.167 183.61)) which resulted in the following error : (65.69% 0.196 275.75), oklch(74.8% 0.26 342.55), oklch(74.51% 0.167 183.61)): Missing ).

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #111-Ubuntu SMP Tue Mar 5 20:16:58 UTC 2024
  Available memory (MB): 15888
  Available CPU cores: 4
Binaries:
  Node: 21.6.2
  npm: 10.2.4
  Yarn: 1.22.10
  pnpm: 8.15.4
Relevant Packages:
  next: 14.2.11 // Latest available version is detected (14.2.11).
  eslint-config-next: 14.1.0
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.2
Next.js Config:
  output: N/A

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

Image (next/image)

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

next dev (local)

Additional context

According to the error message, I believe that there is an issue parsing oklch values.

It might also be a resvg-js issue as satori render the image correctly in the OG image playground, but resvg-js fails to convert it in png.

[Jackie1210]

this latest satori can convert it to svg and has that same effect with browser, but resvg-js cannot convert our svg to png. So I am afraid there are 2 issues:

1. next/image haven't use latest satori
2. resvg cannot handle oklch

[naaa760]

Hello @samcx

While satori works, the problem seems to come from resvg-js, which might not fully support oklch. To resolve this, check your syntax and consider using a fallback color format like rgb or hsl, or update resvg-js if needed.