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

Error trying to run BoldReports on an specific Blazor Server app

I am working on a Blazor Server app using VS2022, NetCore 7 and Syncfusion Controls, all updated to the latest versions. I included BoldReports using your sample code from here (or also from this link) and it works ok. However, if I just add Syncfusion Blazor (without any control installed) it triggers an error before loading the report. I was able to fix it using your solution from this link here and the error was gone. However, after I installed BoldReports on another Blazor Server app that has a lot of Syncfusion controls, the same error appeared. At this point, it seems like the problem is in my app. So, before I start tearing it apart to find where it is I would like to know if I have done everything correct or if there is anything else that I am missing. Thanks so much.

@using Microsoft.AspNetCore.Components.Web

@namespace RPManager.Pages

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>

<html lang="en">


    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <base rel='nofollow' href="~/" />

    <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" />

    <link rel='nofollow' href="css/site.css" rel="stylesheet" />

    <link rel='nofollow' href="RPManager.styles.css" rel="stylesheet" />

    <link rel='nofollow' href="css/custom.css" rel="stylesheet" />

    <link rel='nofollow' href="css/syncfusion.css" rel="stylesheet" />

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

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


    <link rel='nofollow' href="https://cdn.boldreports.com/2.2.32/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" />

    <link rel='nofollow' href="https://cdn.boldreports.com/2.2.32/content/material/bold.theme.compatibility.min.css" rel="stylesheet" />

    <link rel='nofollow' href="https://cdn.boldreports.com/2.2.32/content/material/bold.reportdesigner.compatibility.min.css" rel="stylesheet" />

    <script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>

    <script src="https://cdn.boldreports.com/2.3.26/scripts/common/bold.reports.common.min.js"></script>

    <script src="https://cdn.boldreports.com/2.3.26/scripts/common/bold.reports.widgets.min.js"></script>

    <!--Used to render the chart item. Add this script only if your report contains the chart report item.-->

    <script src="https://cdn.boldreports.com/2.3.26/scripts/data-visualization/ej.chart.min.js"></script>

    <!-- Report Viewer component script-->

    <script src="https://cdn.boldreports.com/2.3.26/scripts/bold.report-viewer.min.js"></script>

    <!-- Blazor interop file -->

    <script src="~/scripts/boldreports-interop.js"></script>


    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />



    <component type="typeof(App)" render-mode="ServerPrerendered" />


    <div id="blazor-error-ui">

        <environment include="Staging,Production">

            An error has occurred. This application may no longer respond until reloaded.


        <environment include="Development">

            An unhandled exception has occurred. See browser dev tools for details.


        <a rel='nofollow' href="" class="reload">Reload</a>

        <a class="dismiss">πŸ—™</a>


    <persist-component-state /> <!-- <== relevant tag helper -->

    <script src="_framework/blazor.server.js"></script>



And this is a copy of the error

An error has occurred. This application may no longer respond until reloaded.

An unhandled exception has occurred. See browser dev tools for details.



4 Replies 1 reply marked as answer

BJ Ben Junior February 17, 2023 06:37 PM UTC

The sample code you provided in this link here is missing how to call the script from the report control page. 

AM Arumugasami Murugesan Syncfusion Team February 20, 2023 02:19 PM UTC

Hi Ben Junior,

Thanks for contacting Bold Reports support.

We have tested the reported issue with the shared information; you have used the lower script version. Could you please test with the latest Bold Reports script and NuGet version? We have prepared and attached a sample application in .NET 7 Blazor application for your reference. Please check this sample and confirm whether the issue reproduced in your end or not. If the issue is not reproduced with our sample, share the issue reproducible sample with us for further validation. 


Arumugasami M

Attachment: ReportViewerBlazor_98043bda.zip

Marked as answer

BJ Ben Junior replied to Arumugasami Murugesan February 23, 2023 02:41 AM UTC

Hi Arumugasami M

Everything is working fine now. I also updated the scripts to the latest version of BoldReports using the attached sample. Thanks so much for your assistance

Best regards,

Ben Junior

P.S. The problem that I was having in one of my specific apps that was preventing BoldReports to run was caused by some scripts in the _Host.cshtml that were needed to run a DropDown menu on the Main Page. 

Once I got rid of them the BoldReports worked fine.

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"



    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"



    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"



AM Arumugasami Murugesan Syncfusion Team February 27, 2023 10:29 AM UTC

Ben Junior,

We are glad to hear that the reported issue has been resolved on your end. If you face any other issues, we suggest you open a new ticket using your account. 


Live Chat Icon For mobile
Up arrow icon