Require

ltng:require enables you to load external CSS and JavaScript libraries after you upload them as static resources. Use the styles attribute to specify a resource name and CSS file. Use the scripts attribute to specify a resource name and JavaScript file.

For example, if your static resource name is jsLibraries, include the jsMyStyles.css and jsLibOne.js files as follows.

Due to a quirk in the way $Resource is parsed in expressions, use the join operator to include multiple $Resource references in a single attribute. For example, to include JavaScript libraries jsLibOne.js and jsLibTwo.js in a component, set the scripts attribute as follows.

The comma-separated lists of resources are loaded in the order you specify them in the scripts and styles attributes. The afterScriptsLoaded action in the client-side controller is called after the scripts are loaded.

To ensure encapsulation and reusability, add the <ltng:require> tag to every .cmp or .app resource that uses the CSS or JavaScript library. The resources only load once if they are specified in multiple <ltng:require> tags in the same component or across different components.

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.

If errors occur when running components that use ltng:require, evaluate your static resource JavaScript in Locker Console to make sure it complies with Locker.

• Using External CSS
• Sharing JavaScript Code Across Components
• Using External JavaScript Libraries
• Locker Console