SfPdfViewer2 TypeError i.Init is not a function in js file

[egidio]

HI,

I implemented this blazor component:

@inherits MyEditForm<SBLDocumentation>

<div class="@IsVisible" style="background-color:lightgray">

<button @onclick="Escape">Exit</button>

@if (!WaitingState)

{

@if (Item.IsInsert)

{

<button @onclick="Save">Save</button>

}

@if (@Item.IsEraseable)

{

<button @onclick="Delete">Delete</button>

}

}

else

{

<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>

}

<h3>Attachment</h3>

<div>

<EditForm Model=@Item>

<MyInputTextBox Label="Description" @[email protected] Disabled=@(!Item.IsInsert) />

<SfPdfViewer2 @ref="viewer" Width="Auto" Height="800px" ToolbarSettings=@ToolbarSettings EnableNavigationToolbar=false>

<PdfViewerEvents DocumentLoaded="@OnAfterLoadedDocument"></PdfViewerEvents>

</SfPdfViewer2>

</EditForm>

</div>

</div>

@code

{

SfPdfViewer2 viewer = new();

PdfViewerToolbarSettings ToolbarSettings = new PdfViewerToolbarSettings()

{

ToolbarItems = new List<Syncfusion.Blazor.SfPdfViewer.ToolbarItem>()

{

Syncfusion.Blazor.SfPdfViewer.ToolbarItem.PageNavigationTool,

Syncfusion.Blazor.SfPdfViewer.ToolbarItem.MagnificationTool,

Syncfusion.Blazor.SfPdfViewer.ToolbarItem.OpenOption,

Syncfusion.Blazor.SfPdfViewer.ToolbarItem.PrintOption

}

};

//Executed after loading file chosen by user

async Task OnAfterLoadedDocument(LoadEventArgs e)

{

try

{

Item.FileByteArray = await viewer.GetDocumentAsync();

}

catch (Exception ex)

{

SmartCoordinator.ShowErrors($"Error loading document. {ex.Message}");

}

WaitingState = false;

}

protected override async Task DoSomethingAfterLoad()

{

try

{

if (Item.FileByteArray != null) await viewer.LoadAsync(Item.FileByteArray);

else

{

SmartCoordinator.ShowErrors($"Error loading document.");

await OnExitCallback.InvokeAsync(false);

}

ToolbarSettings.ToolbarItems.Remove(ToolbarSettings.ToolbarItems[2]);

StateHasChanged();

WaitingState = false;

}

catch (Exception ex)

{

SmartCoordinator.ShowErrors($"Error loading document. {ex.Message}");

WaitingState = false;

}

Item.SetOldValue();

StateHasChanged();

}

}

In execution, loading and displaying the file from the toolbar button works correctly.

Sending the byte array to the server also works correctly, and receiving the byte array from the server also works correctly (I verified that the DoSomethingAfterLoad method receives the correct array if saved locally), but the viewer.LoadAsync(Item.FileByteArray) statement crashes with the error "TypeError: i.Init is not function" in the js file, halting execution.

What could be the problem? Thanks

Attachment: errorscreen_a4edf419.png

[Venkada Subramanian Durai]

Hi egidio,

Thank you for the update. We were unable to reproduce the issue you reported. For your reference, we have attached a sample. Kindly modify the sample to replicate the issue you are facing. This will help us provide a more accurate and effective solution.

 

Additionally, please confirm whether the issue occurs in the latest version (30.2.7). Also, verify if you have included the required styles and scripts in the App.razor file as shown below:

 

    <!-- Syncfusion Blazor PDF Viewer control's theme style sheet -->

   <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

   <!-- Syncfusion Blazor PDF Viewer control's scripts -->

   <script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>

 

If possible, please share a video recording that demonstrates the issue. This will greatly assist us in reproducing and analyzing the problem on our side.

Regards,
Venkada Subramanian D

Attachment: Net8Server_a92ebc1c.zip