We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

TypeError: Cannot read property 'ej2_instances' of null when navigating away from EjsPdfViewerServer

Hi,

I am using Server side Blazor and have created a page with EjsPdfViewerServer.
Everything on the page work find, but when navigating away from that page, I get the following error in the browser console:
TypeError: Cannot read property 'ej2_instances' of null
    at Object.ioSuccessHandler (https://cdn.syncfusion.com/ej2/17.4.40/dist/ejs.interop.min.js:1:19770)
    at https://localhost:44326/_framework/blazor.server.js:8:31421
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:44326/_framework/blazor.server.js:8:31390)
    at https://localhost:44326/_framework/blazor.server.js:1:19202
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:44326/_framework/blazor.server.js:1:19173)
    at e.processIncomingData (https://localhost:44326/_framework/blazor.server.js:1:17165)
    at e.connection.onreceive (https://localhost:44326/_framework/blazor.server.js:1:10276)
    at WebSocket.i.onmessage (https://localhost:44326/_framework/blazor.server.js:1:38091)

The page with the pdf viewer is mostly empty, and I call the pdf viewer like so:
<EjsPdfViewerServer DocumentPath="@DocumentPath" Width="100%" Height="100%" />

Thank you,

Regards,
Tony Wu.



17 Replies

MS Mohan Selvaraj Syncfusion Team January 14, 2020 01:40 PM UTC

Hi Tony  , 

We can reproduce the reported behaviour if we navigate back from the PDF viewer control. We have logged the defect report for the same. The fix will be included in our upcoming weekly NuGet release on January 29th , 2020 
 Regards, 
Mohan S 



NC NKOUAMBIA CHIMENE January 15, 2020 03:19 PM UTC

Hello I have an Issue with pdf Viewer, in a server side blazor app
Issue1: This error on my developpement post 


This is my code
< input type="submit" class="btn btn-outline-primary" @onclick="@(() => InitTemplate())" value="Reset Template" />
             
@code{
EjsPdfViewerServer _viewer;
string _documentPath { get; set; } 
List _pdfTemplateList { get; set; } = new List();

protected override async Task OnInitializedAsync()
{
_pdfTemplateList = await _templateService.GetAllAsync();
_documentPath = ("data:application/pdf;base64," + Convert.ToBase64String((byte[])_pdfTemplateList[0].FileTemplate))
  await _viewer.Load(_documentPath, null);      
}
          // this method load the empty template as to clear the formfields sometimes it works sometimes not
public async void InitTemplate()
{
_documentPath = ("data:application/pdf;base64," + Convert.ToBase64String((byte[])_pdfTemplateList[0].FileTemplate))
await _viewer.Load(_documentPath, null); 
}
}
--------------------------------------------------------------------------------------------------------
sometimes this code works, sometimes it doesn't load and the F12 tools show the error. I have another page where I use PDF Viewer with a specified physique _documentPath(string documentPath { get; set; } = "wwwroot/Data/FeuilleEvalInfirmiereDynamique.pdf";) and its works perfectly. I'm I missing something in my code.

Issue2: On my Nginx server with linux centos nether the one with specified physical path nor the one with the pdf load from service none of them load the pdf

and my F12  tools give me the 


Thanks,
Chimène NK


MS Mohan Selvaraj Syncfusion Team January 17, 2020 08:46 AM UTC

Hi Tony, 
 
ssue1: This error on my developpement post  
 
 
This is my code 
< input type="submit" class="btn btn-outline-primary" @onclick="@(() => InitTemplate())" value="Reset Template" /> 
              
@code{ 
              EjsPdfViewerServer _viewer; 
              string _documentPath { get; set; }  
              List _pdfTemplateList { get; set; } = new List(); 
 
              protected override async Task OnInitializedAsync() 
              { 
               _pdfTemplateList = await _templateService.GetAllAsync(); 
               _documentPath = ("data:application/pdf;base64," + Convert.ToBase64String((byte[])_pdfTemplateList[0].FileTemplate)) 
                await _viewer.Load(_documentPath, null);       
              } 
          // this method load the empty template as to clear the formfields sometimes it works sometimes not 
              public async void InitTemplate() 
              { 
                             _documentPath = ("data:application/pdf;base64," + Convert.ToBase64String((byte[])_pdfTemplateList[0].FileTemplate)) 
                             await _viewer.Load(_documentPath, null);  
              } 
} 

We are unable to reproduce the reported issue. We suspect that the issue may also due to accessing the PDF Viewer control instance before it is created . So instead of loading the PDF document from the Viewer.Load() method ,you can also use the DocumentPath Property during the control initialization, in which we have provided two way binding support. So by using this property you can set the document as base64 string/path as provided in the below code snippet. 
<EjsPdfViewerServer @ref="@PDFViewer" Height="500px" Width="1060px" DocumentPath="@documentPath"></EjsPdfViewerServer> 

@code{ 
private string documentPath { get; set; } 
protected override async Task OnInitializedAsync() 
    { 
        documentPath ="data:application/pdf;base64," + Convert.ToBase64String(bytearray)); 



We have also shared the sample for the same . Kindly download the same from the below link. 



If you still face the issue , you can use the OnInitialized () method instead of using OnInitializedAsync() method as provided in the below code snippet. 


protected override void OnInitialized()     {         string base64String = "data:application/pdf;base64," + Convert.ToBase64String(byteArray);             
      DocumentPath = "data:application/pdf;base64," + base64String;     }  



If the provided details does not resolve the issue. Kindly modify the sample in which we have provided . So that would be helpful for us to analysis more and assist you better. 
Issue2: On my Nginx server with linux centos nether the one with specified physical path nor the one with the pdf load from service none of them load the pdf 
We are using Pdfium rendering engine for robust rendering in our PDF Viewer, it will generate the Pdfium dll during the run time (i.e, on loading the document). We suspect that due to the write access permission is denied in the production environment the reported issue may occurred and so can you please try copying the below assemblies in the bin folder based on the operating system to production environment to resolve the issue.  



Linux: libpdfium.so 
Windows: Pdfium.dll 
Mac: libpdfium.dylib 

 
 
Regards, 
Mohan S 



NC NKOUAMBIA CHIMENE January 23, 2020 02:15 PM UTC

Hello,

Still have the same issue this are the step I follow 
1- On my developpement post(Windows10) I copy the file libpdfium.so into the folder  MyApp\bin\Releaseetcoreapp3.1\linux-x64\libpdfium.so (I even copy it in the MyApp\bin\Debugetcoreapp3.1\libpdfium.so) I also copy the pdfium.dll in those folder just in case
2. I publish my project then I find out that the  libpdfium.so is not in release folder(even the pdfium.dll)
3. I copy it manually in the app folder on my linux server in but still have the same error
Just to remind every thing works on my developpement post

Thanks,
Chimène NK.


AA Akshaya Arivoli Syncfusion Team January 24, 2020 12:04 PM UTC

Hi NKOUAMBIA , 

We have analyzed further on this and found that some library dependencies of libpdfium.so are missing in your linux environment. To resolve this issue, you have to execute the following command.  

RUN apt-get update \  
    && apt-get install -y --allow-unauthenticated \  
        libc6-dev \  
        libgdiplus \  
        libx11-dev \  
        curl \  
        vim \  
        supervisor \  
        procps  
  

Please let us know if you have any concerns about this.  

Regards, 
Akshaya 



NC NKOUAMBIA CHIMENE January 24, 2020 02:17 PM UTC

Hello Akshaya,

On my linux server(Centos 7) I'm using YUM not apt-get  so I execute the yum install and there is 2 package that yum installation has not found
sudo yum install -y libc6-dev libgdiplus libx11-dev curl vim supervisor procps
this are message 

 but there is a package call libXll-devel that i install i don't know if its the same thing


Thanks,
Chimène NK.


AA Akshaya Arivoli Syncfusion Team January 27, 2020 11:36 AM UTC

Hi NKOUAMBIA , 

We are currently working on creating the environment with the provided details to check the reported query. We will update you with further details on January 30th,2020 


Regards, 
Akshaya 



AA Akshaya Arivoli Syncfusion Team January 30, 2020 11:01 AM UTC

Hi  NKOUAMBIA, 
 
Thank you for your patience. 
 
You can install the package glibc-devel instead of libc6-dev. Please find the details in the following forum 
 
 
And also libXll-devel is the same package of libx11-dev. 
 
Please try it and let us know if you have any queries about this. 
 
Thanks, 
Akshaya 



NC NKOUAMBIA CHIMENE January 30, 2020 03:35 PM UTC

Helle this are the step I follow but almost the same errors,

1 - Copy the x86 and x64 folder containing pdfium.dll in the \bin\Debugetcoreapp3.1\ and in \bin\Releaseetcoreapp3.1\linux-x64\ in my dev environnement
2- Install all the giving linux package on my centos Server

3- Deploy the app and then copy the both x64 and x86 in the deploy folder because it doesn't add automatically when deploy. give the full 777 to the folder
4- restart my app and nginx service 
BUT THE SAME BEHAVIOR AND SAME ERROR IN LINUX SERVER PDF DOESN'T SHOW (just to remember every thing work on my windows10 dev post)