Introduction

Salesforce does not provide support for third-party JavaScript libraries, but is possible to use external libraries with LWC.

Some restrictions apply:

  1. If your component runs in an Org where Lightning Web Security (LWS) isn’t enabled, libraries used by your component must meet Lightning Locker requirements. See Determine Whether a JavaScript Library Is Locker Compliant.
  2. If the Org is using Lightning Web Security (LWS), most third-party libraries work as is unless the library uses strict mode. See Third-Party Library Strict Mode With LWS.

<aside> ℹ️ Please review the official documentation on the minor details regarding Locker compliance and implications when using Javascript Strict Mode: Use Third-Party JavaScript Libraries | Lightning Web Components Developer Guide | Salesforce Developers

</aside>

How to use a 3rd Party Library

This is a common procedure to use a 3rd party library:

  1. Create a static resource with the library files as described in this section Using static resources.
  2. In your Javascript LWC file, import the library by its static resource: import RESOURCE_NAME from "@salesforce/resourceUrl/RESOURCE_NAME"
  3. Import these 2 methods from the platformResourceLoader module: import {loadStyle, loadScript} from "lightning/platformResourceLoader"
  4. Load the libraries into the LWC by using loadStyle and loadScript to load the files from the static resource. These methods return promises.
    1. Use Promise.all() to aggregate the results and ensure that all required files from the library are resolved.
    2. The then() callback is invoked only after the load completes and only if no error occurs. You can optionally provide a catch() callback to handle any potential error occurring during the load process.

If you need to load more than 1 file from the static resource, use this mechanism:

Promise.all([
  loadScript(this, RESOURCE_NAME + "/lib1.js"),
  loadScript(this, RESOURCE_NAME + "/lib2.js"),
  loadScript(this, RESOURCE_NAME + "/lib3.js"),
]).then(() => {
  /* callback */
});