Open graph image. SVG data parsing failed cause unknown token at 1:1 #61047
Comments
github-actions
bot
added
Runtime
This comment has been minimized.
This comment has been minimized.
|
In addition, I get this error |
|
I had the same error In my case, I just removed the xml tag from my svg (it was created with Sketch), and I no longer had the error: I only had the error self hosted on a VPS, not on Vercel |
|
I get the same error in the same use case. I don't have the The error also seems to occur randomly. At least there is doesn't occurs everytime and I can't see a clear pattern for now. I am hosting on a VPS. |
This comment has been minimized.
This comment has been minimized.
|
@rusakovic Can you verify if you are seeing this with Next.js version |
|
Hello @samcx Thank you for your response. I switched to the official Nexjts Docker Compose implementation -> no memory leaks now. |
|
@rusakovic Good to know! I will be closing this in the meantime then. |
|
We're on next 13.5.6 and getting Am I understanding correctly that the issue is fixed in |
|
@ethteck Yes—it was likely fixed with this |
|
thanks! |
|
Unfortunately on 14.1.4 I'm still seeing this issue: I see 5.5/7.58G of memory used on the device, so I don't think this is due to memory scarcity, but I'm not 100% sure edit: after restarting the next.js server, memory usage dropped to only 200MB from the 2000+ it was using earlier. this seems like a memory leak |
|
Reproduced locally after running curl for ~20 mins in a while/do loop: next-server is using a lot of memory: |
|
@samcx, please can this issue be reopened so the root cause of the memory leak can be investigated? For some reason, resvg/resvg2 is being given garbage data to try to parse. I think it's tricky to debug, I also don't know where this code lives (besides looking at index.edge.js on npmjs). Could it be that the image data is never free'd? The memory usage seemed to raise around 5mb per request... Edit: I tried adding some It's fair to say I'm just hacking around, but if I call free here, the memory usage is much more sensible (it grows at maybe 500kb/request): --- node_modules/next/dist/compiled/@vercel/og/index.edge.js.orig 2024-03-24 19:43:50.664334383 +0000
+++ node_modules/next/dist/compiled/@vercel/og/index.edge.js 2024-03-24 19:44:02.624426590 +0000
@@ -18784,7 +18784,10 @@
value: options.width
}
});
- return resvgJS.render().asPng();
+ const image = resvgJS.render();
+ const png = image.asPng();
+ image.free();
+ return png;
}
// src/figma/index.tsx}Been running curl on a loop for 20+ minutes and memory is significantly lower than without this change: |
|
I have the same problem in 14.1.3 When I use an SVG in an OG ImageResponse, it generates memory leaks and errors in a short period of time. Error: SVG data parsing failed cause unknown token at 1:1 Edit: I have the problem without using SVG too.
|
|
I have created a repo to clearly demonstrate the issue. First load of the image: Load after it's been loaded a number of times: After a minute or so, the error occurs: I'm running this on a machine with 128GB RAM and it's getting nowhere close to the limit before it stops working: |
|
I have the same issue on version 14.1.4 when using node runtime to generate openGraph images at build time |
|
any fixes |
|
I have this error too but with the image. In my case on localhost, I just need npm run dev again to see error gone. |
|
I have the error to, in localhost it work tho |
|
bump, very annoying issue |
This comment has been minimized.
This comment has been minimized.
|
also affected 👍 |
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/amazing-easley-s8cw85?file=%2Fapp%2F%5Bslug%5D%2Fopengraph-image.tsx%3A48%2C18
To Reproduce
opengraph-image.tsxCurrent vs. Expected behavior
On the first load of
/open-graphthe image is generated.But on cached version I got the error
with
export const dynamic = "force-dynamic";I receive the similar error.Update 25.01. I get this error now
Live check (could work when you open, because I use
force-dynamicto check if it helps)https://likeremote.com/remote-jobs/stripe-remote-job-staff-developer-advocate-developer-relations-7778/opengraph-image
The error from Cloudlfare side, just 502 error, for sure
Now I use
export const dynamic = "force-dynamic";not to generate cache version.Expected: The cached open graph image showed correctly
Provide environment information
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:53:18 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6000 Binaries: Node: 20.10.0 npm: 10.2.3 Yarn: 1.22.19 pnpm: 8.10.5 Relevant Packages: next: 14.1.0 eslint-config-next: 14.0.4 react: 18.2.0 react-dom: 18.2.0 typescript: 5.2.2 Next.js Config: output: N/AWhich area(s) are affected? (Select all that apply)
Dynamic imports (next/dynamic), Image optimization (next/image, next/legacy/image), Middleware / Edge (API routes, runtime)
Which stage(s) are affected? (Select all that apply)
Other (Deployed)
Additional context
No response
The text was updated successfully, but these errors were encountered: