[SalesForce] $Resource global variable is not available in Lightning Component

I try to build a lightning component embedded in Lightning Experience. My org is Summer 16 Dev Org.

The component is in a Account record page.

When using follows, it compiles successfully. 

<ltng:require styles="{!$Resource.leaflet + '/leaflet.css'}" 
              scripts="{!$Resource.leaflet + '/leaflet.js'}" 
              afterScriptsLoaded="{!c.jsLoaded}" />

But I got an error on loading:

Uncaught Action failed: ltng$require$controller$init [TypeError: d.get is not a function]

However, using as follows is OK.

<ltng:require styles="/resource/leaflet/leaflet.css" 
              scripts="/resource/leaflet/leaflet.js" 
              afterScriptsLoaded="{!c.jsLoaded}" />

Complete code:

AccountMap.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
   <ltng:require styles="/resource/leaflet/leaflet.css" 
              scripts="/resource/leaflet/leaflet.js" 
              afterScriptsLoaded="{!c.jsLoaded}" />
   <div aura:id="map"></div>
</aura:component>

AccountMapController.js

({
    jsLoaded : function(component, event, helper) {
        alert('ff');
    }
})

Best Answer

I suspect that you fall into one of the following:

1) Your code is within a managed package, in which case you would need to alter the reference to include the namespace prefix. If your namespace was 'mynamespace' then you would need the following:

<ltng:require styles="{!$Resource.mynamespace__leaflet + '/leaflet.css'}" 
              scripts="{!$Resource.mynamespace__leaflet + '/leaflet.js'}" 
              afterScriptsLoaded="{!c.jsLoaded}" />

2) Your code is within a component that does not have a client-side controller. In this case your component will be rendered server-side and the $Resource value provider does not work there.

First, $Resource isn’t available until the Lightning Component framework is loaded on the client. Some very simple components that are composed of only markup can be rendered server-side, where $Resource isn’t available. To avoid this, when you create a new app, stub out a client-side controller to force components to be rendered on the client.

Documentation at https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_resource_value_provider.htm

Related Topic