2

When there is a LWC using svg use tag like suggested on Lightning design system site and Lightning Web Security is turned on (the setting Use Lightning Web Security for Lightning web components on Session Settings), it breaks LWC with an error

Error during LWC component connect phase: [String.prototype.startsWith called on null or undefined]

Listing of example component

<template>
    Web Security
    <lightning-combobox
        label="Select"
        options={svgOptions}
        onchange={handleSelection} >
    </lightning-combobox>

    <svg class="slds-icon slds-icon-text-default" aria-hidden="true">
        <use xlink:href={svg}></use>
    </svg>
</template>

Listing of example JS file

import { LightningElement } from 'lwc';

export default class WebSecurity extends LightningElement {

    svgOptions = [{label:'Utility',value:'/assets/icons/utility-sprite/svg/symbols.svg#notification'},{label:'Standard & Custom',value:'/assets/icons/standard-sprite/svg/symbols.svg#account'}];

    handleSelection(event) {
        this.svg = event.detail.value;
    }
}

2 Answers 2

2

I quickly reproduced this on what you shared - but, I had no issue with this code once I added a check to make sure svg is not null as I assume it has no value initially.

<template if:true={svg}>
    <svg class="slds-icon slds-icon-text-default" aria-hidden="true">
        <use xlink:href={svg}></use>
    </svg>
</template>

The above prevents the error, but to display the icons you'll also want to update your links to use _slds vs. asset in the path. Noted in some other answers.

svgOptions = [
    {
        label:'Utility',
        value:'/_slds/icons/utility-sprite/svg/symbols.svg#notification'
    },
    {
        label:'Standard Custom',
        value:'/_slds/icons/standard-sprite/svg/symbols.svg#account'
    }
];

You can also consider using lightning-icon instead and dynamically switching the icon-name.

5
  • let me check your workaround
    – Patlatus
    Apr 27, 2022 at 14:51
  • 1
    actually, yes, as a workaround we might either wrap this under template if:true or use svg = ''. Actually in fact we are using static resource in real issue, so I can't use lightning-icon there, I tried here to simplify the definition of problem, so I removed the references to the static resource and replaced them by references to standard SLDS icons. Still, it shouldn't fail since it doesn't fail when LWC Web Security is turned off.
    – Patlatus
    Apr 27, 2022 at 14:56
  • Figured it was simplified. I disagree whether we know it "shouldn't fail since it doesn't fail when LWC Web Security is turned off". Support can answer that question or if this is expected based on the differences with what LWS does. Apr 27, 2022 at 14:58
  • I expect from SF Support to confirm, but it might take months to receive actual confirmation from them
    – Patlatus
    May 5, 2022 at 12:32
  • Finally I have received confirmation from SF Support
    – Patlatus
    May 11, 2022 at 10:00
0

Update (as of 11th May 2022):

Salesforce has confirmed the bug and opened known issue.

Details below.

I have opened a case in Salesforce support.

There is some issue in the aura_proddebug.js:14475:12 and aura_prod.js:49:2828

    StringStartsWith()@https://static.lightning.force.com/cs92/auraFW/javascript/2yRFfs4WfGnFrNGn9C_dGg/aura_proddebug.js:14475:12
    sanitizeSvgHrefValue()@https://static.lightning.force.com/cs92/auraFW/javascript/2yRFfs4WfGnFrNGn9C_dGg/aura_proddebug.js:15663:9
    Object.value [as sanitizeAttribute]()@https://static.lightning.force.com/cs92/auraFW/javascript/2yRFfs4WfGnFrNGn9C_dGg/aura_proddebug.js:34752:18

aura_prod.js

tt()@https://static.lightning.force.com/cs92/auraFW/javascript/2yRFfs4WfGnFrNGn9C_dGg/aura_prod.js:49:2828
pi()@https://static.lightning.force.com/cs92/auraFW/javascript/2yRFfs4WfGnFrNGn9C_dGg/aura_prod.js:78:1359
Object.value [as sanitizeAttribute]()@https://static.lightning.force.com/cs92/auraFW/javascript/2yRFfs4WfGnFrNGn9C_dGg/aura_prod.js:100:134492
2
  • This may fit best as an edit to your original post until you hear back from support
    – nbrown
    Apr 27, 2022 at 21:48
  • @nbrown I finally received confirmation from SF Support
    – Patlatus
    May 11, 2022 at 9:59

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .