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.

1import { loadStyle, loadScript } from "lightning/platformResourceLoader";

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.

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.

1loadScript(this, myResourceName + "/myResourceName.js").then(() => {
2  // your code with calls to the JS library
3});

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

1import { LightningElement } from "lwc";
2import { loadStyle, loadScript } from "lightning/platformResourceLoader";
3
4import leaflet from "@salesforce/resourceUrl/leaflet";
5
6export default class MyMap extends LightningElement {
7  // invoke the loaders in connectedCallback() to ensure that
8  // the page loads and renders the container before the map is created
9
10  connectedCallback() {
11    Promise.all([
12      loadStyle(this, leaflet + "/leaflet.css"),
13      loadScript(this, leaflet + "/leaflet.js"),
14    ]).then(() => {
15      // initialize the library using a reference to the container element obtained from the DOM
16      const el = this.template.querySelector("div");
17      const mymap = L.map(el).setView([51.505, -0.09], 13);
18
19      // Load and display tile layers with your access token
20      L.tileLayer(
21        "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}",
22        {
23          maxZoom: 18,
24          id: "mapbox.streets",
25          accessToken: "your.mapbox.access.token",
26        },
27      ).addTo(mymap);
28    });
29  }
30}

If an Aura component uses ltng:require to load a script url, and an LWC component uses loadScript from lightning/platformResourceLoader to load the same script url in the same page, the script duplication is not detected and the script is loaded twice. The script must protect itself from duplication, for instance by checking if a global is already defined.

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