Problem loading javascript library in skuid component on lightning page.

  • 1
  • Problem
  • Updated 2 months ago
  • Solved
I am trying to run a javascript library inside of a skuid component on a lightning page. The javascript is loaded into the page as a static resource. When the component loads on the page it gives me this salesforce error 

"[Cannot read property 'application/pdf' of undefined]
eval()@https://org.lightning.force.com/resource/1518608135000/pdfobject/PDFObject-master/pdfobject.min.js"

When I preview the page it loads correctly and displays how we want it to.
Photo of Spencer Ince

Spencer Ince

  • 150 Points 100 badge 2x thumb

Posted 4 months ago

  • 1
Photo of Fernando Ramirez

Fernando Ramirez

  • 212 Points 100 badge 2x thumb
Hi Spencer. 
Check your Javascript code and make sure all your variables are declared explicitly as var

This happens when your JS has any type of variable such:


msg = 'any Value';


at running time you will get an error message:

cannot read property msg  of undefined

Correct declaration must be: 

var msg = 'any Value';


Hope this helps in any way.
If you prefer, you can share a portion of your JS where you think is raising this error.
Photo of Spencer Ince

Spencer Ince

  • 150 Points 100 badge 2x thumb
Hi Fernando, 
Thanks for responding. I have pasted the little javascript that we have on the page below. As I have said before, the page loads and displays correctly in preview but does not display in a skuid lightning component. I have also attached a picture of the error that we are getting. Thanks again.

$ = skuid.$;
window.setTimeout(function(){
    
var options = {
    height: "900px",
    width: "100%" ,
    pdfOpenParams: { view: 'FitB', page: '1' }
    };
    
var s3 = skuid.$M('s3file');
$.each(s3.data,function(){
   
var s3file = this.URL__c;
if (s3file.indexOf("https://" == -1)) {
    s3fileFix = s3file.replace("http://","https://");
    console.log(s3fileFix);
    var container = '#my-container' + this.Id;
    console.log(container);
    PDFObject.embed(s3fileFix,container, options);
}
});
},500);
(Edited)
Photo of Fernando Ramirez

Fernando Ramirez

  • 212 Points 100 badge 2x thumb
Sorry for the late response. 

The error message happens (for some reason) when your Skuid page is running in Lightning Experience. 

But your code is all right, just procure declare this variables as:

                 var s3fileFix = s3file.replace("http://","https://");


Also, looking at the error message, there is a reference to this PDFObject
If my suggestion doesn't work, then probably you will need to do something around that utility.


Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
Another problem we run into is making sure you have "generated page support files."  This is important after you copy a page into a new org (by creating a new page by copying in xml from another page or environment.)  This step pushes your snippets to the SF static resource, making it available to be used by your page.
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,040 Points 10k badge 2x thumb
Fernando and Chandra have shared some great suggestions here. I also wanted to mention that the error message you're sharing sounds like the snippet could be firing off too soon in Lightning. Whatever the application/pdf property is attached to is apparently undefined when the snippet runs. Any custom code you're using in Lightning needs to be Lockerservice compliant, so the static resource you're mentioning may also need to be vetted for compatibility. The fact that the functionality is working in Preview mode but not in Lightning points to the need for strict Javascript, and/or Lockerservice compliance. 
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,040 Points 10k badge 2x thumb
Hi Spencer, I wanted to check in and see if you were able to resolve this. It's been a while since this thread had any activity, but if you are still having trouble, let us know what your current roadblocks look like and we'll keep working with you. 

Mark