System.ArgumentNullException: Value cannot be null. (Parameter 'jsRuntime')

[MartijnWoudstra]

Describe the bug System.ArgumentNullException: Value cannot be null. (Parameter 'jsRuntime')

To Reproduce Steps to reproduce the behavior:

1. Use the code provided.
2. See the console output.

Expected behavior A graph nicely drawn

Additional context

Error log:

warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: Value cannot be null. (Parameter 'jsRuntime')
System.ArgumentNullException: Value cannot be null. (Parameter 'jsRuntime')
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeAsync[TValue](IJSRuntime jsRuntime, String identifier, Object[] args)
   at Blazorise.Charts.JS.UpdateChart[TItem,TOptions](IJSRuntime runtime, String canvasId, ChartData`1 data, TOptions options, String dataJsonString, String optionsJsonString)
   at Blazorise.Charts.BaseChart`4.Update()
   at X.Pages.ResultDetailPageQuadratic.HandleRedraw() in D:\Code\X\X\Pages\ResultDetailPageQuadratic.razor:line 71
   at X.Pages.ResultDetailPageQuadratic.OnAfterRenderAsync(Boolean firstRender) in D:\Code\X\X\Pages\ResultDetailPageQuadratic.razor:line 55
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'pz6xZDI_828I-Cyg25EY_wustVDeXMt6G4BMWTsLZS8'.
System.AggregateException: One or more errors occurred. (Value cannot be null. (Parameter 'jsRuntime'))
 ---> System.ArgumentNullException: Value cannot be null. (Parameter 'jsRuntime')
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeAsync[TValue](IJSRuntime jsRuntime, String identifier, Object[] args)
   at Blazorise.Charts.JS.UpdateChart[TItem,TOptions](IJSRuntime runtime, String canvasId, ChartData`1 data, TOptions options, String dataJsonString, String optionsJsonString)
   at Blazorise.Charts.BaseChart`4.Update()
   at X.Pages.ResultDetailPageQuadratic.HandleRedraw() in D:\Code\X\X\Pages\ResultDetailPageQuadratic.razor:line 71
   at X.Pages.ResultDetailPageQuadratic.OnAfterRenderAsync(Boolean firstRender) in D:\Code\X\X\Pages\ResultDetailPageQuadratic.razor:line 55
   --- End of inner exception stack trace ---

Code: MyChart.razor

<Chart @ref="radarChart" Type="ChartType.Radar" TItem="double"/>
@code{
sync Task HandleRedraw()
    {
        radarChart = new Chart<double>();
        radarChart.Clear();
        radarChart.AddLabel(new string[] { "", "", "", "", "", "", "", "", });
        radarChart.AddDataSet(GetRadarChartDataset().Result);
        await radarChart.Update();
    }

    async Task<RadarChartDataset<double>[]> GetRadarChartDataset()
    {
        i
        RadarChartDataset<double> dataset1 = null;
        List<double> data = new List<double>();

        dataset1 = new RadarChartDataset<double>
        {
            Label = "Kernwaarde",
            Data = MyData.ToList(),
            BackgroundColor = MyColorBG,
            BorderColor = MyColorBorder,
            Fill = true,
            LineTension = 0

        };
        return new RadarChartDataset<double>[] {
            dataset1
        };
}

Startup:

services.AddBlazorise(options =>
            {
            });

            services.AddEmptyProviders();

[stsrki]

The error is really strange cause there is no parameter in Blazorise named jsRuntime. All I can think of is that your chart data are not initialized properly. Please look at #590 issue, it might be the same problem as yours.

[MartijnWoudstra]

@stsrki at Microsoft.JSInterop.JSRuntimeExtensions.InvokeAsync[TValue](IJSRuntime jsRuntime, String identifier, Object[] args)

My guess is the injection of the IJSRuntime (parameter called jsRuntime) is going wrong somehow. The issue linked by you does not fix the issue

[stsrki]

That was my first thought also. But there is no reason for it to not be injected. It's Blazor thing. All I have is this code: [Inject] IJSRuntime JSRuntime { get; set; }, and that should be enough to be injected by the framework.

Can you create and push a sample project so I can have a look?

[MartijnWoudstra]

@stsrki Voila,

https://github.com/MartijnWoudstra/BlazoriseExample/

Exception happens at https://github.com/MartijnWoudstra/BlazoriseExample/blob/master/BlazoriseExample/Pages/GraphPage.razor#L50

[stsrki]

I found your problem.

First: Add <script src="_content/Blazorise.Charts/blazorise.charts.js"></script> to the _Host.cshtml.

Second: You have radarChart = new RadarChart<double>(); in your HandleRedraw() function. That is the problem because that is the reference for Blazor component. You should never initialize variables that you use for @ref attribute.

I removed it and now it works.

async Task HandleRedraw()
{
    radarChart.Clear();

    radarChart.AddLabel( new string[] { "", "", "", "", "", "", "", "", } );
    //RadarChart.AddLabel(new string[] { "Axis 1","Axis 2", "Axis 4",
    //     "Axis 5", "Axis 7","Axis 8", "Axis 10", "Axis 11" });

    radarChart.AddDataSet( await GetRadarChartDataset() );

    try
    {
        await radarChart.Update();
    }
    catch ( Exception e )
    {
        Console.WriteLine( e.StackTrace );
    }
}

PS. I also changed GetRadarChartDataset().Result to await GetRadarChartDataset(). Otherwise Result could lead to deadlocks.

[MartijnWoudstra]

Thanks, works!