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

[callumlocke]

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?

[developit]

@callumlocke what version of Preact are you seeing this with? There should be no Dom property reads anymore in 5.x (npm install --save preact@beta)

[callumlocke]

I'm using 4. Will give 5.beta a try, thanks. Are there any gotchas for me to be aware of when upgrading to 5?

do I also need to upgrade preact-compat?

[developit]

Nope, should just be a ton faster and a little smaller :)

There are no backwards-incompatible _changes_ in Preact 5, only a bunch of _additional_ features - the major version bump is just to mark those new features, so that code depending on them has a way to indicate that it won't work with Preact 4.x & prior.

As long as you're running a reasonably recent preact-compat (1.7.1 is the latest, released in April), there's no need to update preact-compat. Expect a minor version bump for that lib before Preact 5.0 gets rolled over to being the current mainline version, though (nothing breaking, just Preact now supports cloneElement() natively, so preact-compat doesn't have to patch that in anymore).

[callumlocke]

With npm 2, I get a fatal EPEERINVALID when trying to install preact@beta, because preact-compat peer-depends on preact@4. Is there a workaround for that (assuming I can't upgrade to npm3)?

[developit]

Ah - I've been using npm 3 for so long I forgot about that. I'll throw a preact-compat release out there that allows 5+.

[callumlocke]

If you could do that soon, that would be awesome!

[developit]

Will do, I actually found an svg issue when combining preact 5 with preact-compat that I was fixing last night. It's waiting on a decision about whether to bundle svg support into preact itself. I can just publish the -compat version thing though, will do that right away.

[developit]

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

[callumlocke]

damn, it seems like [email protected]'s peer-dep semver range (*) doesn't actually include the beta! Not sure why. I've asked the question at https://github.com/npm/node-semver/issues/162

[developit]

Weird... maybe it was because I unpublished and republished? Should be at 5.0.1-beta.14.

[developit]

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

Also a note: I just published [email protected], which removes the optionalDependencies field from package.json, which I think might have been causing the semver issue.