4

I've activated LockerService in my pre-release org, and I'm running into a problem with svg.

As currently svg isn't supported by Lightning, I'm using the custom svg component as described in the SLDS Trailhead module. Then I try to add my component to the Home page through App Builder, I got the following error:

Unfortunately, there was a problem. Please try again. If the problem continues, get in touch with your administrator with the error ID shown here and any other related details. Something has gone wrong. rerender threw an error in 'markup://aura:expression' [TypeError: document.createElementNS is not a function. (In 'document.createElementNS("http://www.w3.org/2000/svg", "svg")', 'document.createElementNS' is undefined)] Failing descriptor: {markup://aura:expression}. Please try again.

Problem is coming from this line in the svg component renderer:

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

I guess it's because with LockerService, we only have access to a virtual DOM, so document doesn't have a createElementNS method anymore.

Even worse: if I create a Component without svg, add it to the Home Page through App Builder and then update the Component to add a svg tag, this make the whole Salesforce app crash. Home Page is blank (which is somehow ok as a component is KO, even though I guess it should be rendered without the one crashing), but also I can't navigate without having errors and unsuccessful pages load.

So how can I use svg (and thus use Salesforce Lightning Design System) with LockerService activated ?

Here is a simple component with this problem:

<aura:component implements="flexipage:availableForAllPageTypes">
    <ltng:require styles="/resource/slds102/assets/styles/salesforce-lightning-design-system.css"/>
    <div class="slds">
        <c:svg class="slds-button__icon slds-button__icon- -large" xlinkHref="/resource/slds102/assets/icons/action-sprite/svg/symbols.svg#close" />
    </div>
</aura:component>

Thanks for the help.

7

SVG support along with document.createElementNS() is coming very soon - already in a scheduled patch branch. I'll double check on the release date but I believe it deploys tommorow night. We've filled in many other gaps in the secure virtual DOM API with more on the way in following patches. Please pardon our dust as we get this dialed in over the next few weeks and definitely keep letting us know when you hit missing methods/properties.

  • 1
    Thanks for the answer ! And no problem, I guess it's what pre-release are for :) – Fabien Taillon Apr 26 '16 at 0:00
  • 1
    I just verified that this is in the .2 patch of Summer'16 scheduled to deploy starting 4/26 mid afternoon pacific standard time (safe harbor and all that of course!). We have even more queued up for .3 (support for the full set of Global Event Handlers developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers, fix for removeEventListener(), support for meta tags, head/body access, etc). – Doug Chasman Apr 26 '16 at 0:30
  • 1
    That's great news ! Thanks for taking time to answer and get these details. – Fabien Taillon Apr 26 '16 at 8:46
  • Doug, you mentioned support for meta tags in your comment, but I could not find any related information in the summer 16 release notes. As I have this problem salesforce.stackexchange.com/questions/116274/… the ability to add own meta tags would be perfect. Do you have any further information about? – Christian Menzinger Jun 7 '16 at 10:53
  • document.createElement("meta") is fully supported under LS along with filtered access (your code can only see/manipulate the children of these shared nodes that it creates) to head and body including head/body.appendChild(). – Doug Chasman Jun 8 '16 at 14:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.