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
  1. Home
  2. Forum
  3. Blazor
  4. TypeError: Cannot read property 'ej2_instances' of null when navigating away from EjsPdfViewerServer

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 08:40 AM

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 10:19 AM

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 03:46 AM

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 09:15 AM

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 07:04 AM

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 09:17 AM

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 06:36 AM

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 06:01 AM

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 10:35 AM

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)

I'm I missing something ?
 
Thanks,
Chimène NK.

AA Akshaya Arivoli Syncfusion Team January 31, 2020 08:26 AM

Hi NKOUAMBIA, 

Based on the provided details we suspect that you are copying x86 and x64 folder containing pdfium.dll in Linux environment. Kindly use the  Syncfusion.EJ2.PdfViewer.AspNet.Core.Linux package in your application for linux environment and ensure whether the libpdfium.so referred inside your project folder (bin\Debugetcoreapp3.1) , if not due to write access permission denied, please copy the below file inside the folder (bin\Debugetcoreapp3.1)   


Please try it if you still facing the we would like to have meeting look into your environment to resolve the issue.  Kindly follow the incident created under your Direc Trac account for further updates. 

Regards, 
Akshaya 



NC NKOUAMBIA CHIMENE January 31, 2020 04:07 PM

Hello Team!

I add the package and its seem like starting work but the pdfViewer doesn't show my file correctly
load empty template from database and then take json file and import (on my post it show well)

this a image of my folder on linux server all this lib have been generate automatically after adding the linux package (I have made no manual file copy)


Thanks,
Chimène NK!

AA Akshaya Arivoli Syncfusion Team February 3, 2020 02:30 AM

Hi NKOUAMBIA, 

Thank you for your update. 

Based on the provided details suspect that error occurred in rendering of the PDF pages (RenderPdfPages()), page numbers were updated, so the load() web action method must executed successfully. Can you please provide us the console error details /exception details if any you are facing in your environment, provide more details about your issue, simple sample with replication procedure to reproduce the issue from our side. These details will be helpful for us to investigate further and assist you better.  

Regards, 
Akshaya 


NC NKOUAMBIA CHIMENE February 3, 2020 12:53 PM

Hello Team! 

I joint a mini project with my needed features please try make it work in both environnement windows in dev post and linux(Centos 7) on server, if all of feature work(initiliaze, export, import, add optional pdf, then initialize again, export both pdf, import both pdf ...) in both environnement please let me know how you do it. (i give the 777 right on wwwroot folder in my server giving the root:root but still not work, add also linux package )

sometimes even on my dev post I have the error and nothing work! 


Hope we will find and solution, I'm out of ideas!
Thanks !
Chimène NK.


Attachment: PdfViewer_Blazor_ServerNKC_c0136de9.7z

AA Akshaya Arivoli Syncfusion Team February 4, 2020 08:16 AM

Hi NKOUAMBIA, 

Thank you for your update. 
  
We have analyzed the provided sample and found that both Windows and Linux packages were installed in the project, so the mentioned script error occurred. It is enough to install the package required for that environment alone in the project no need to install both packages. 

For Windows OS, install Syncfusion.EJ2.Blazor.PdfViewerServer.Windows alone. Use the ‘PdfViewer_Blazor_Server.csproj’ project file 
For Linux install Syncfusion.EJ2.Blazor.PdfViewerServer.Linux package alone. Use the ‘PdfViewer_Blazor_Server_linux.csproj’ project file. 

Also, we have modified the sample to load the different PDF document in the multiple instance of PDF viewer control in a page. Please find the modified sample from the following link. In the sample we can load the PDF documents from multiple instance and reinitialize it. However we are facing the exception ‘The type initializer for 'Gdip' threw an exception‘ in Centos 7, we are currently checking on it and we will update to you with further details on February 6th, 2020 


 Note: The documentPath property is bindable so we could load the documents again if we change the documentPath property value.   

As, mentioned earlier we can see the script error ‘Cannot read property 'successHandler' of undefined’ if import/export the form fields from multiple instance. We have logged the defect report for the same and the fix for the issue will be available in our February 19th, 2020 weekly release Nuget package.   

Please try this and revert us with more details about if you still have concerns. 
  
  
Regards, 
Akshaya 


AA Akshaya Arivoli Syncfusion Team February 5, 2020 04:42 AM

Hi NKOUAMBIA, 

On analyzing further on the exception ‘The type initializer for 'Gdip' threw an exception’ in Centos 7, we found that it could be resolved by adding the below command before running the project. 


export LD_LIBRARY_PATH=/lib64/  


So can you please try this and revert us with more details if you have any concerns on this.  

Regards, 
Akshaya 


NC NKOUAMBIA CHIMENE February 6, 2020 10:31 AM

Hello!

I think in my humble advice that 2 pdfViewer in the same page have problem may be i'm wrong this is a little project with 2 pdf, import and export json, clear form fields

@page "/"

<h1>Hello, world!</h1>

Welcome to your PDF Viewer
<input type="submit" class="btn btn-outline-primary" @onclick="@ClearPdfViewer" value="ReInitialiser" />
<input type="submit" class="btn btn-outline-primary" @onclick="@ExportJson" value="Exporter" />
<input type="submit" class="btn btn-outline-primary" @onclick="@ImportJson" value="Importer" />

<EjsPdfViewerServer @ref="@Viewer" DocumentPath="@DocumentPath" Height="500px" Width="1060px" ></EjsPdfViewerServer>
<EjsPdfViewerServer DocumentPath="@DocumentPathNote" @ref="@ViewerN" Width="1060px" Height="750px"/>

@code{
    
    EjsPdfViewerServer Viewer;
    EjsPdfViewerServer ViewerN;
    
    private string DocumentPath { get; set; } = "wwwroot/Data/FormFillingDocument.pdf";
    private string DocumentPathNote { get; set; } = "wwwroot/Data/FormFilling_Signature.pdf";

    public void ClearPdfViewer()
    {
        Viewer.Load("wwwroot/Data/FormFillingDocument.pdf", null);
ViewerN.Load("wwwroot/Data/FormFilling_Signature.pdf", null);      
    }

    public async void ExportJson()
    {
        await Viewer.ExportFormFields();
        await ViewerN.ExportFormFields();  
    }

    public async void ImportJson()
    {
        await Viewer.ImportFormFields(@"wwwroot/Data/FormFillingDocument.json");
        await ViewerN.ImportFormFields(@"wwwroot/Data/FormFilling_Signature.json");  
    }
}

But when load my application I have the first PDF not renderring even if all the toolbar are ok i'm able to print and download the file with pdf toolbar but i'm not seen the pdf on PdfViewer.(doesn't have the problem when having just one pdf in page but for my use case I need 2 pdf in my page)