Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Uncaught error when doing dangerouslySetInnerHTML="<svg>...</svg>"

See original GitHub issue

When my dangerouslySetInnerHTML string includes an inline SVG, it renders fine the first time, but when it re-renders I get uncaught errors:

preact.js:158 Uncaught TypeError: Cannot assign to read only property 'height' of object '#<SVGSVGElement>'

I’m guessing this is to do with the fact that inline SVGs require a special module, preact-svg…? But I’m not sure how that can work for my use case, because my SVG is entirely inside the string I am trying to ‘dangerously inject’.

Any idea how I can fix this?

Issue Analytics

State:
Created 7 years ago
Comments:11 (7 by maintainers)

Top GitHub Comments

2reactions

developitcommented, Jun 18, 2016

@callumlocke Sorry for the wait there (painting a bedroom) - I just published preact-compat@1.8.0 that will allow you to use preact@beta. Let me know if that works!

0reactions

developitcommented, Jul 9, 2016

I think I can confirm this seems to be fixed in 5.x: https://jsfiddle.net/developit/j31tf2jd/

Also a note: I just published preact-compat@1.10.0, which removes the optionalDependencies field from package.json, which I think might have been causing the semver issue.

Top Results From Across the Web

React - Using svg <defs> with dangerouslySetInnerHTML

The problem comes from you calling your functional component's input argument icons , and the assumptions that stem from that naming choice.

Two ways to solve: Cannot find SVG module error when ...

Here we declare a new module for SVGs by specifying any import that ends in .svg and defining the module's content as any....

Managing inline SVGs with React/Webpack - union.io

In the first file, we simply require() the second file (line 2), and, within the component, add a <g> tag with the raw...

preact dangerouslysetinnerhtml - You.com | The AI Search ...

React dangerouslySetInnerHTML not working when using variable ... preactjs/preactUncaught error when doing dangerouslySetInnerHTML="<svg>...</svg>"#194.

Experimenting with SVGs | by Redfin Engineering - Code Red

Recently, we started using SVG for icons at Redfin! ... I used a set of 20 SVGs, including 2 icons that are malformed,...