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:closed
  • Created 7 years ago
  • Comments:11 (7 by maintainers)

github_iconTop GitHub Comments

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!

developitcommented, Jul 9, 2016

I think I can confirm this seems to be fixed in 5.x:

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.

Read more comments on GitHub >

github_iconTop 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.
Read more >
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....
Read more >
Managing inline SVGs with React/Webpack -
In the first file, we simply require() the second file (line 2), and, within the component, add a <g> tag with the raw...
Read more >
preact dangerouslysetinnerhtml - | The AI Search ...
React dangerouslySetInnerHTML not working when using variable ... preactjs/preactUncaught error when doing dangerouslySetInnerHTML="<svg>...</svg>"#194.
Read more >
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,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found