Uncaught (in promise) Event when rendering SVG node in React Vite SPA, only on Chrome

[vincerubinetti]

First, I want to make clear:

• This is an extremely specific scenario
• This also occurs in the base dom-to-image package
• This is almost certainly an upstream bug in Chrome or React

But I wanted to document it here in case anyone else ran into it, and in case the maintainers have any insights. Feel free to close.

Take a look at the test.zip example below. It has a simple SVG in the static HTML, and then the same SVG rendered through JSX in a Vite React SPA. When you try to run toPng on the first SVG, it works fine. When you try to run it on the second SVG, you get an uncaught error. And this doesn't happen in Firefox or Safari, just Chrome (131.0.6778.86).

I've traced the error to somewhere in the makeSvgDataUri function. If you get rid of the xhtml xmlns and foreignObject stuff -- i.e. just data:image/svg+xml;charset=utf-8,${new XMLSerializer().serializeToString(svg)} -- the error goes away. (I'm not sure why the original package does this crazy multi-namespace wrapper stuff, seems like it's bound to cause more trouble than whatever edge case it was meant to support).

Another way to fix it is to wrap the problematic SVG in a div, and run toPng on that instead.

This is one of the most specific and weird bugs I've seen in my career. I'll update this issue if I'm able to figure out exactly what the Chromium/React bug is. Since the static HTML SVG works fine, I'm thinking it must have something to do with invisible properties (as opposed to static attributes) React is setting on the DOM element... Comparing the static HTML and getComputedStyles on both SVGs, they are both exactly the same.

Minimum reproducible example

test.zip

Run npm install and npm run dev.

Library version

3.5.0

Browsers

• Chrome 49+
• Firefox 45+
• Safari