Why is ltng require scripts not working for me?

643 Asked by elonji_3393 in Salesforce , Asked on May 12, 2023

I'm having trouble accessing my static resource (a js lib) in my controller.js in my lightning component.

My goal is to bundle up all my javascript functions and classes and use them across most components, and NOT paste them in the helper.js every time!

in static resource (BaseFunctions / public / application/javascript)
window.BaseFunctions = (function() { var _toast = function (type, title, message, data) { let params = { 'mode': 'dismissible', 'duration': '5000' }; if (type === 'info' || !type) { params.title = title || 'Info'; params.key = 'info_alt'; // or info params.type = 'info'; } else if (type === 'success') { params.title = title || 'Success'; params.key = params.type = 'success'; } else if (type === 'warning') { params.title = title || 'Warning'; params.key = params.type = 'warning'; } else if (type === 'error') { params.title = title || 'Error'; params.key = params.type = 'error'; } if (Array.isArray(data)) { params.messageTemplate = message; params.messageTemplateData = data; } else { params.message = message; } $A.get('e.force:showToast').setParams(params).fire(); }; var _refreshView = function () { $A.get('e.force:refreshView').fire(); }; var _closeQuickAction = function () { $A.get('e.force:closeQuickAction').fire(); }; return { toast: _toast, closeQuickAction: _closeQuickAction, refreshView: _refreshView }; }());
in .cmp file

in controller.js / init function
BaseFunctions // this is undefined! // this obviously also crashes the component BaseFunctions.toast('info', null, 'test message');
The ugly solution: This is tested and gives results.

added this to .cmp

  <!-- already had these 2, for anyone who needs the full code -->  
and in the controller.js

doInit: function (component, event, helper) { component.set('v.templateLoaded', true); $A.enqueueAction(component.get('c.fullLoadCheck')); }, afterScriptsLoaded: function(component, event, helper) { component.set('v.scriptsLoaded', true); $A.enqueueAction(component.get('c.fullLoadCheck')); }, fullLoadCheck: function(component, event, helper) { if (component.get('v.templateLoaded') && component.get('v.scriptsLoaded')) { $A.enqueueAction(component.get('c.realInit')); } }, // real init. template and the static js-libs loaded. realInit: function(component, event, helper) { console.log('realInit'); BaseFunctions.toast('success', null, 'it worked'); },

Answered by David EDWARDS

Your scripts from are not guaranteed to be available in your component's init handler. They are loaded asynchronously. You need to add the attribute

  afterScriptsLoaded="{!c.afterScriptsLoaded}"

to your tag, and implement a afterScriptsLoaded handler function in your component controller to take any actions that are required when your script library becomes available to the component.

See Using External JavaScript Libraries :

The afterScriptsLoaded action in the client-side controller is called after the scripts are loaded and the component is rendered. Don't use the init event to access scripts loaded by . These scripts load asynchronously and are most likely not available when the init event handler is called.

Why is ltng require scripts not working for me?

Your Answer