Experience Cloud introduced the Lightning Web Runtime (LWR) last year as a modern—and fast!—runtime of choice. But to reap the benefits that LWR offers, you need to invest in developing Lightning web components to provide the functionality that your site users need.
Typically your custom Lightning web component will operate smoothly in LWR, but there are definitely exceptions to that rule. The more complex your custom Lightning web component is, the more likely you are to hit one of the current LWR limitations. As LWR continues to close these gaps, however, I foresee these limitations reducing and becoming less of a consideration.
In Lightning Web Runtime (LWR), developers often encounter limitations that require creative solutions to ensure smooth functionality. This document explores common LWR limitations and provides simple workarounds with practical examples.
1. location.search Replacement:
Issue: In LWR, location.search may not work as expected, hindering URL parameter retrieval.
Workaround: Utilise document.URL instead of location.search for retrieving URL parameters.
Example:
// Before
const parameter = decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)));
// After
const queryString = document.URL.split('?')[1];
const parameter = decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(queryString)));2. window.location.host Replacement:
Issue: Similar to location.search, window.location.host may not function correctly in LWR.
Workaround: Replace window.location.host with document.URL for URL manipulation.
Example:
// Before
const isPreview = (window.location.host.indexOf('sitepreview') > 0);
// After
const isPreview = (document.URL.indexOf('sitepreview') > 0);3. Custom Script Loading:
Issue: Standard methods like platformResourceLoader may not work for loading scripts in LWR.
Workaround: Implement a custom loadScript function for loading third-party libraries.
Example:
loadScript(url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.charset = 'utf-8';
script.type = 'text/javascript';
document.head.appendChild(script);
script.addEventListener('load', resolve);
script.addEventListener('error', reject);
});
}4. Replacement of showToast Event with Lightning Alert:
Issue: The platform show-to-event is unsupported in LWR, necessitating an alternative method for displaying toast messages.
Workaround: Utilise Lightning's built-in lightning/alert component to display alert messages instead of toast messages.
Example:
import { LightningElement } from 'lwc';
import { LightningAlert } from 'lightning/alert';
export default class MyComponent extends LightningElement {
async showAlertModal(message, title, variant) {
try {
const modalAttributes = {
message: message,
title: title,
variant: variant // Use variant to determine alert type (info, warning, error, success)
};
// Open the alert modal and wait for it to be closed
await LightningAlert.open(modalAttributes);
// Code to execute after the modal is closed
console.log('Alert modal closed successfully');
} catch (error) {
console.error('Error occurred while displaying alert modal:', error);
}
}
}import ToastContainer from 'lightning/toastContainer';
import Toast from 'lightning/toast';
export default class MyToastComponent extends LightningElement {
connectedCallback() {
const toastContainer = ToastContainer.instance();
toastContainer.maxToasts = 5;
toastContainer.toastPosition = 'top-right';
}
showToast() {
Toast.show({
label: 'This is a toast title with a {0} placeholder link that gets replaced by labelLinks',
labelLinks: [{
'url': 'https://www.lightningdesignsystem.com/components/toast/',
'label': 'Toast link'
}],
message: 'This message has a {0} placeholder link that gets replaced by from messageLinks',
messageLinks: [{
url: 'http://www.salesforce.com',
label: 'Salesforce link'
}],
mode: 'sticky',
variant: 'info',
onclose: () => {
// Do something after the toast is closed
}
});
}
}5. lightning-file-upload:
Issue: The lightning-file-upload component, used for uploading files in Lightning Components, is not supported in LWR due to it being wrapped in Aura as of the Spring 23 release of SF
Workaround: Implement a custom file upload solution using standard HTML file input elements combined with JavaScript or utilize a third-party file upload library compatible with LWR.
You can mark Embed on External Website as true and it switches the component to use lighting-input as the file upload method when doing this you are restricted to the 3.5 MB file size limit but does give you an option for file upload in LWR.
Unlike Aura sites, LWR sites don't support the lightning-file-upload base component. While I don't mind rolling my own file upload component, with Apex you're limited to files around ~4.5 MB, otherwise, you hit heap size errors. That's too low a limit if you have to accept (for example) scanned documents in a PDF format, which can get up to 15-20 MB.
There is a workaround involving the Ajax Toolkit in a Visualforce iframe if the user is authenticated, but it doesn't work in a Guest User context.
Conclusion
By understanding LWR limitations and applying straightforward workarounds, developers can ensure smooth functionality and compatibility with their applications. These examples demonstrate practical approaches to overcome common challenges, enhancing the development experience in Lightning Web Runtime.
Note: These examples provide simplified solutions for illustrative purposes. Developers should adapt these approaches as needed based on their specific requirements and application contexts.
References
Blog Credit:
P. Ahuja
Salesforce Developer
Avenoir Technologies Pvt. Ltd.
Reach us: team@avenoir.ai