vercel
Open graph image. Failed to parse linear-gradient with oklch values.
Discussed in https://github.com/vercel/satori/discussions/636
Originally posted by firmart September 16, 2024
Link to the code that reproduces this issue
To Reproduce
- Start the app
npm run dev - 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.
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:
- next/image haven't use latest satori
- resvg cannot handle oklch
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.
