Introduction
This article covers how to use a Lightning Web Component (LWC) that exists inside of a managed package (from a different namespace) inside a custom LWC.
This is something we have been able to do with Aura components for a long time but still to this date we face challenges to complete this operation when working solely with LWCs.
To solve this problem, we will look at using Lightning Web Security in Salesforce.
The use case
Managed packages are a great way to obtain pre-built functionality for your org quickly and can be installed by following a URL or through the AppExchange.
Some of these managed packages will contain LWCs which you may want to wrap inside your existing components. This is achieved by referencing the LWC name(s) in your source code.
Without using Lightning Web Security, you will encounter the error “Attempting to reference cross-namespace module X in Y” which is why Lightning Web Security must be enabled for this solution.
Reference a managed LWC inside a custom LWC
In this scenario we’re going to use the Address Verification Flow Component by ProvenWorks as it demonstrates:
- An LWC belonging to a managed package namespace (pw_avfc),
- Using properties in a component.
I have created a new LWC in Visual Studio Code and opened the HTML file. Lines 3 to 6 reference the Address Verification Flow Component.
Whilst the component name is pw_avfc:addressVerificationFlowBaseComponent, the camel casing needs to be converted to kebab casing. This changes the name (and what we would have used in Aura) to pw_avfc-address-verification-flow-base-component.
If you’re not familiar with kebab casing, check out this trailhead that explains how to convert from camel casing to kebab.
The component has some properties that we’re passing values to, these names (useCounty and inlineMode) have also been converted to kebab casing.
Once you have completed the above, you can deploy the LWC to your org.
Enabling Lightning Web Security
As mentioned, this approach will only work when Lightning Web Security is enabled so we must enable this before testing.
- Go to Salesforce Setup | Session Settings.
- Enable Use Lightning Web Security for Lightning web components.
- Select Save.
You will now need to clear your browser cache for the change to take effect.
Lightning Web Security overview
This article isn’t for the purpose of explaining Lightning Web Security in any detail other than it’s the answer to this problem. At the date of writing this article (31/AUG/2022) Lightning Web Security comes with limitations that can impact other component behaviour.
The Salesforce Developer documentation on the topic is filled with lots of useful information about the feature. You can find out more here: Lightning Web Security – Salesforce Lightning Component Library. I recommend specifically reviewing the subtopic of “When to Enable Lightning Web Security” as this may help you determine if it is suitable for your use case.
At the time of writing, a current example of Lightning Web Security causing issues is when using Vlocity OmniStudio. When the feature is enabled in an org, OmniStudio becomes unusable. To work around this, you can simply disable the setting, use OmniStudio and then reenable Lightning Web Security when you’re ready to deploy.
Specifically with OmniStudio, Salesforce’s current recommendation is “..keep the ‘Use Lightning Web Security for Lightning web components’ checkbox unchecked…” Not able to save Omniscripts – ‘Use Lightning Web Security for Lightning web components’ Enabled (salesforce.com) but there may be some alternative options like leaving it disabled in sandbox/dev organisation and enabled in production, but this really is a last resort.
Test your component
Now it’s time to look at the component. Place it somewhere in your org to test (i.e. an app, a flow screen, etc.). When you look at your custom component, you should now find the managed package component is successfully rendering within it.
If you’re still seeing errors linked to “Attempting to reference cross-namespace module” then ensure your browser cache is cleared and try again.
Summary
We’ve investigated how you can wrap a LWC from a managed package inside of a custom LWC which will hopefully unlock some potential for your org to grow quicker than before. Whilst it is currently dependent on Lightning Web Security (which has its limitations), it is clear that Salesforce is continuing to work on and improve its functionality.