System.TypeLoadException: 'Could not load type 'System.Windows.Size' from assembly 'WindowsBase, Version=4.0.0.0

I'm new to web front end development. I ran into an error that was hard to understand by my ability.

System.TypeLoadException: 'Could not load type 'System.Windows.Size' from assembly 'WindowsBase, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35'.'

Situation

I'm implementing a progress bar linked to two videos using .net core 5.0(Let's name the two videos A and B respectively.)

When the time of A is updated, the corresponding event(ontimeupdate) is executed and the current time value of the video is put into the value of the progress bar.

At that time, I should to execute StateHasChanged() for refreshing progress bar(This means that the StateHasChanged function is called once every second)

But after starting the video, after 5~10 seconds elapses, the above error occurs. So I deleted StateHasChanged() and It works very well, however progress bar is not refreshed.

Page have one table, four line charts(chartjs.Blazor), two videos(Blazored.Video).

Problem I guess

• Is it caused by upgrading .net core 3.1 to 5.0?
• Is it a problem by drawing too many components at once? (two videos, four charts(draw by chartjs.Blazor))?
• Would it be a problem if StateHasChanged() is called periodically when there is 'chartjs' components?

code

I'm using MatBlazor, Blazored.Video, ChartJs.Blazor Nuget packages

-------- razor page --------
<BlazoredVideo PlayEvent="OnPlay" TimeUpdate="OnTimeUpdate"
               VideoEventOptions="options"
               class="w-100"
               style="max-width:800px;"
               controls="controls">
    <source src="https://res.cloudinary.com/blazoredgitter/video/upload/v1557015491/samples/elephants.mp4" type="video/mp4" />
</BlazoredVideo>

<MatSlider Id="video_slider" @bind-Value="@currentVideoDuration" Discrete="true" Pin="true" TValue="int" ValueMin="0" ValueMax="100"></MatSlider>

<div class="row">
    <div class="col-md-6">
        <ChartJsLineChart @ref="_lineChartJs" Config="@lineConfig1" Width="600" Height="300" />
    </div>
    <div class="col-md-6">
        <ChartJsLineChart @ref="_lineChartJs" Config="@lineConfig2" Width="600" Height="300" />
    </div>
</div>


-------- cs code(code behind) --------

public LineConfig lineConfig1;
public LineConfig lineConfig2;
public ChartJsLineChart _lineChartJs;

Dictionary<VideoEvents, VideoStateOptions> options = new Dictionary<VideoEvents, VideoStateOptions>();
public int currentVideoDuration;

var option = new VideoStateOptions() { All = true };
     
protected override async Task OnInitializedAsync()       
{
    var option = new VideoStateOptions() { All = true };
    
    options[VideoEvents.Pause] = option;
    options[VideoEvents.Play] = option;
    options[VideoEvents.Playing] = option;
    options[VideoEvents.Progress] = option;
    options[VideoEvents.TimeUpdate] = new VideoStateOptions() { CurrentTime = true };
    currentVideoDuration = 0;

    await base.OnInitializedAsync();
}

public void OnTimeUpdate(VideoState state)
{
    currentVideoDuration = (int)state.CurrentTime;
    StateHasChanged();  <-- caused error
}

//line chart configuration.. and set chart datas

Sorry for bad English. It's too difficult to solve this for me. Someone please help me.

Edit

While using Blazored.Video and ChartJS.blazor at the same time, I found out that this is a problem if the StateHasChanged function is called periodically.

I tested it .net core 3.1, 5.0 with new project I installed package to need only And I tested with page which have just one video or just one chart(It worked well)

However, although I found the problem, I couldn't solve it by my abillity. I think I should to change a one of two packages or both.. :(