---
schema_version: "1"
id: adad5fb99718a56901acf178110c2cfa46f70a30645e315653934da618bda2dc
title: Platform Resource Loader
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/platformResourceLoader/lightning-platform-resource-loader.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-platform-resource-loader.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: c3afbdabc37d47bd2ae38afeded996828c6ddd430e798f5d303a1d5e430560ed
products:
  - Lightning Component Reference
---
# Platform Resource Loader

**`lightning/platformResourceLoader`**

Use third-party libraries that are uploaded as a static resource in your org.

**For Use In**

Lightning Experience

::::::tabset{tabs='[ "Develop", "Specifications"]'}

:::::tab

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.

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

## `loadScript(self, fileUrl): Promise`

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.

## `loadStyle(self, fileUrl): Promise`

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.

## Usage

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](https://developer.salesforce.com/docs/platform/lwc/guide/create-resources.html) 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.

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

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

```javascript
import { LightningElement } from "lwc";
import { loadStyle, loadScript } from "lightning/platformResourceLoader";

import leaflet from "@salesforce/resourceUrl/leaflet";

export default class MyMap extends LightningElement {
  // invoke the loaders in connectedCallback() to ensure that
  // the page loads and renders the container before the map is created

  connectedCallback() {
    Promise.all([
      loadStyle(this, leaflet + "/leaflet.css"),
      loadScript(this, leaflet + "/leaflet.js"),
    ]).then(() => {
      // initialize the library using a reference to the container element obtained from the DOM
      const el = this.template.querySelector("div");
      const mymap = L.map(el).setView([51.505, -0.09], 13);

      // Load and display tile layers with your access token
      L.tileLayer(
        "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}",
        {
          maxZoom: 18,
          id: "mapbox.streets",
          accessToken: "your.mapbox.access.token",
        },
      ).addTo(mymap);
    });
  }
}
```

### Aura Components That Load the Same Script

If an Aura component uses [`ltng:require`](/docs/platform/lightning-component-reference/guide/ltng-require.html) 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.

## LWC Recipes

The [LWC Recipes GitHub repository](https://github.com/trailheadapps/lwc-recipes) 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`

## See Also

[Use Third-Party JavaScript Libraries](https://developer.salesforce.com/docs/platform/lwc/guide/js-third-party-library)

[Access Static Resources](https://developer.salesforce.com/docs/platform/lwc/guide/create-resources)


:::::

:::::tab
::component-specification{component="platformResourceLoader" model="lwc" namespace="lightning"}

:::::

::::::