Platform Resource Loader

The lightning/platformResourceLoader module has two methods, loadScript and loadStyle. Both methods create and return promises, which can be chained or used in parallel. You control the load sequence of your scripts or styles. In your component's JavaScript file, import the functions from the lightning/platformResourceLoader module.

Accesses a .js file in a static resource. Returns a promise that resolves after the file has loaded.

• self - A reference to the component. The value must be this.
• fileUrl - A string that contains the path to the JavaScript file. To build the string, concatenate the resourceName and the path to the file within the static resource archive.
• config - An optional object you can supply when the script is to run in LWS trusted mode. The config object contains these properties.
  • trustedMode - Boolean that enables the script to run outside the LWS sandbox when set to true. The default is false.
  • trustedGlobals - An array containing the names of global properties that the component can access within the LWS sandbox. Although the script runs outside the LWS sandbox, your component code can only access the properties that you specify in this array. The default value of trustedGlobals is [].

Accesses a .css file in a static resource. Returns a promise that resolves after the file has loaded.

• self - A reference to the component. The value must be this.
• fileUrl - A string that contains the path to the CSS file. To build the string, concatenate the resourceName and the path to the file within the static resource archive.

To import a third-party JavaScript or CSS library, use the platformResourceLoader module.

1. Download the JavaScript or CSS files from the third-party library's site.

2. Upload the library to your Salesforce organization as a static resource, which is a Lightning security requirement for using third-party code. For more information, see Access Static Resources in the Lightning Web Components Developer Guide.

3. In a component's JavaScript file:

   • Import the static resource.

     import myResourceName from '@salesforce/resourceUrl/myResourceName';

   • Import methods from the platformResourceLoader module. Dynamic imports of this module aren’t allowed.

     import { loadStyle, loadScript } from 'lightning/platformResourceLoader';

4. Load the library and call its functions in a promise then() method.

This example shows how to use platformResourceLoader with the Leaflet library to create an interactive map.

The LWC Recipes GitHub repository contains code examples for Lightning Web Components that you can test in an org.

For a recipe that uses lightning/platformResourceLoader, see these components in the LWC Recipes repo.

• c-libs-chartjs
• c-libs-d3

Use Third-Party JavaScript Libraries

Access Static Resources

Use Trusted Mode to Elevate Third-Party Scripts