Troubleshooting
- 10 minutes to read
This topic describes common issues and steps you can follow to diagnose and resolve these issues. If the solutions listed here do not help, create a ticket in our Support Center.
Version-Related Issues
Update to a New Version
If an error occurs after you upgraded DevExpress Blazor components to a newer version, review the list of breaking changes and update your project accordingly. Also make sure that you configure the project as described in this section: Install Components and Create an Application.
Could not find ‘X’ in ‘window.DxBlazor’.
In the previous versions of Blazor components, users had to add the client scripts. In the latest versions, we distribute the scripts via the NuGet Package in the _content/DevExpress.Blazor folder. If you reference an older version of our static files, you may encounter a similar issue:
Error: Microsoft.JSInterop.JSException: Could not find ‘FormLayout’ in ‘window.DxBlazor’.
Error: Could not find ‘FormLayout’ in ‘window.DxBlazor’.
We recommend that you use the latest versions of our components distributed from NuGet Packages.
Resources-Related Issues
Failed to load resource
DevExpress Blazor components use an RCL (Razor class library) with static assets to share resources. The following exception occurs if your application does not load client-side resources correctly:
Failed to load resource: the server responded with a status of 404 () - dx-blazor.js
Failed to load resource: the server responded with a status of 404 () - dx-blazor.css
To fix this issue, review the following topic: Consume content from a referenced RCL.
‘dx-blazor.js file is not found’ when a reverse proxy is used
When you run a Blazor application behind a reverse proxy, the following exception can occur: dx-blazor.js file is not found.
DevExpress Blazor components generate a URL to the dx-blazor.js library based on the NavigationManager object. The NavigationManager.BaseUri property corresponds to the href attribute of your document’s <base> element on the wwwroot/index.html (Blazor WebAssembly) or Pages/_Host.cshtml (Blazor Server) page. The error occurs if this property does not contain your reverse proxy path.
Do one of the following to resolve the issue:
- Include the reverse proxy path to the
<base>element as described in this topic. - Call the UsePathBase as demonstrated in this thread.
Framework-Related Issues
.NET 5.0: Operation is not valid due to the current state of the object
When you use .NET 5.0 RC 1 and try to publish a Blazor project, the following exception can occur:
System.InvalidOperationException: Operation is not valid due to the current state of the object
This issue relates to the internal code of .NET 5.0. For more information, refer to the following issue in the linker‘s repository: Generic type array causes InvalidOperationException in ReflectionMethodBodyScanner.GetValueNodeFromGenericArgument.
To resolve this issue, try to disable the trimming feature. In your *.csproj file, disable the PublishTrimmed flag.
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
...
<PublishTrimmed>false</PublishTrimmed>
</PropertyGroup>
...
</Project>
Common Component Issues
An unhandled exception on the current circuit
You may see the following error message about an exception on the current circuit:
There was an unhandled exception on the current circuit, so this circuit will be terminated. For more information, turn on detailed exceptions in ‘CircuitOptions.DetailedErrors’.
To get more information about the error, add the following code to the ConfigureServices method declared in the Startup.cs file:
services.AddServerSideBlazor().AddCircuitOptions(options => { options.DetailedErrors = true; });
The type arguments cannot be inferred from the usage
The Data Grid, ComboBox, List Box, TagBox, and ComboBox Column includes the DataAsync property. It allows you to bind the component to a strongly typed collection that is loaded asynchronously.
The following exception occurs if you declare the DataAsync function with an incorrect signature:
The type arguments for method ‘TypeInference.CreateDxDataGrid_0<T>’ cannot be inferred from the usage. Try specifying the type arguments explicitly.
To resolve the issue, ensure that the function signature meets the following requirements:
- The type of the returned value is
Task<IEnumerable<T>>. - The function has a parameter of the CancellationToken type.
@using System.Threading
<DxDataGrid DataAsync="@GetForecastAsync">
</DxDataGrid>
@code {
public class WeatherForecast {
// ...
}
public Task<IEnumerable<WeatherForecast>> GetForecastAsync(CancellationToken ct = default) {
// ...
}
}
The child content element ‘ChildContent’ of component ‘X’ uses the same parameter name (‘context’) …
When you nest DevExpress Blazor components that contain RenderFragment<TValue> properties, a Razor error can occur. For example, the following code nests a DxButton component within a DxFormLayoutItem component.
<DxFormLayoutItem>
<Template>
<DxButton>OK</DxButton>
</Template>
</DxFormLayoutItem>
Both components include properties that specify render fragments: DxFormLayoutItem‘s Template and DxButton‘s ChildContent. This means that Blazor adds Context implicit parameters to each component:
<DxFormLayoutItem>
<Template Context="context">
<DxButton Context="context">OK</DxButton>
</Template>
</DxFormLayoutItem>
The Context parameters have the same default value. This causes the following error:
Error RZ9999 The child content element ‘ChildContent’ of component ‘DxButton’ uses the same parameter name (‘context’) as enclosing child content element ‘Template’ of component ‘DxFormLayoutItem’. Specify the parameter name like: ‘<ChildContent Context=”another_name”>’ to resolve the ambiguity.
To fix the issue, specify the Context parameter explicitly in one of the components:
<DxFormLayoutItem>
<Template>
<DxButton Context="buttonCtx">OK</DxButton>
</Template>
</DxFormLayoutItem>
The component parameter ‘ValueChanged’ is used two or more times for this component…
In Blazor, when you use two-way binding to a property (PropertyName), you implicitly handle the corresponding PropertyNameChanged event and define the PropertyNameExpression property. For example, bind the Spin Edit’s Value property in the following way:
<DxSpinEdit @bind-Value="@DecimalValue"></DxSpinEdit>
@code {
Decimal DecimalValue { get; set; } = 15;
}
After you build the project, the “~/obj/Debug/net5.0/Razor/Pages/Index.razor.g.cs” file contains the ValueChanged and ValueExpression attributes, although you did not specify them in your code:
__builder.AddAttribute(__seq1, "ValueChanged", __arg1);
__builder.AddAttribute(__seq2, "ValueExpression", __arg2);
So, if you add the ValueChanged event handler as in the code snippet below, Blazor generates the ValueChanged attribute one more time:
<DxSpinEdit @bind-Value="@DecimalValue"
ValueChanged="@((Decimal newValue) => OnValueChanged(newValue))">
</DxSpinEdit>
In this case, the following error is displayed:
The component parameter ‘ValueChanged’ is used two or more times for this component. Parameters must be unique (case-insensitive). The component parameter ‘ValueChanged’ is generated by the ‘@bind-Value’ directive attribute.
To solve this issue, do not use two-way binding and event handling together. Specify the property value and handle the corresponding event instead:
<DxSpinEdit Value="@DecimalValue" ValueChanged="@((Decimal newValue) => OnValueChanged(newValue))"></DxSpinEdit>
@code {
Decimal DecimalValue { get; set; } = 15;
void OnValueChanged(Decimal newValue)
{
DecimalValue = newValue;
// Perform some other actions
}
}
Duplicate @key values in the if/else statement
If you use the same @key value for different HTML elements in the if/else statement, your code can produce incorrect behavior (for instance, styles and classes assigned to these elements are lost). For more information, refer to the following issue: Duplicate @key values don’t throw clear exception in if/else case.
The following code snippet creates the EditTemplate for the Data Grid’s Availability column. A user can change the initial checkbox state in the edit form, but if the user clicks the checkbox again, it is replaced with the standard column editor.
<DxDataGrid Data="@DataSource" ...>
<DxDataGridColumn Field="@nameof(Product.Availability)" Caption="Availability" Width="150px">
<EditTemplate>
@{
var dataItem = ((CellEditContext)context).DataItem;
var inStock = (bool)((CellEditContext)context).CellValue;
if (inStock)
{
<input @key="@dataItem" type="checkbox" @onchange=@(args =>
{ ((CellEditContext)context).OnChanged(args.Value); }) checked />
}
else
{
<input @key="@dataItem" type="checkbox" @onchange=@(args =>
{ ((CellEditContext)context).OnChanged(args.Value); }) />
}
}
</EditTemplate>
</DxDataGridColumn>
</DxDataGrid>
To fix the issue, use unique @key values within the same if/else statement.
Some Blazor components features (for instance, drag and drop and column resize) do not work in my application
Your browser may block certain operations in our components (e.g., drag and drop of the Scheduler appointments, Data Grid column resize, etc.). This typically happens when you run your Blazor application in the Microsoft Edge Legacy browser with .NET 5.0. In such cases, the browser fails to load JavaScript files included in our components. Refer to the following Microsoft issue for more information.
We add these JavaScript files to our components, because the Blazor framework does not ship with corresponding native events. To optimize network traffic when our JavaScript resources are sent, our components use front-end methodologies, such as tree shaking and code splitting. The main idea is to deliver only required JavaScript code. Most of these .js files are small and contain only a few functions.
The components include similar JavaScript files with different prefixes:
esm-XXX.jsfiles stand for ESM.cjs-XXX.jsfiles are fallback files for browsers that don’t support ESM.
To resolve the initial problem, run your application in a browser that is compatible with DevExpress Blazor components and your .NET version. For more information, refer to Supported Browsers.
Data Grid-Related Issues
InvalidOperationException
If you use Blazor WebAssemly Data Grid, you may see the following exception in a browser:
System.InvalidOperationException: No generic method ‘Take’ on type ‘System.Linq.Queryable’ is compatible with the supplied type arguments and arguments.
To resolve this issue, do one of the following:
- Set the
BlazorWebAssemblyEnableLinkingproperty to false in the project file to disable the link with an MSBuild property.<PropertyGroup> ... <BlazorWebAssemblyEnableLinking>false</BlazorWebAssemblyEnableLinking> </PropertyGroup> - Add the LinkerConfig.xml file and include the following code:
Then specify this file as an MSBuild item in the project file.<?xml version="1.0" encoding="UTF-8" ?> ... <linker> <assembly fullname="mscorlib"> ... <type fullname="System.Threading.WasmRuntime" /> </assembly> <assembly fullname="System.Core"> ... <type fullname="System.Linq.Expressions*" /> <type fullname="System.Linq.Queryable*" /> <type fullname="System.Linq.Enumerable*" /> <type fullname="System.Linq.EnumerableRewriter*" /> </assembly> ... <assembly fullname="[PUT YOUR ASSEMBLY NAME HERE]" /> </linker><ItemGroup> ... <BlazorLinkerDescriptor Include="LinkerConfig.xml" /> </ItemGroup>
See the following topic for more information: Configure the Linker for ASP.NET Core Blazor.
The Data Grid is re-rendered incorrectly after a property is changed
The Data Grid can be rendered incorrectly when you bind its property to a model field and update the field value outside the Data Grid’s code. For instance, this issue occurs for the following properties: DataNavigationMode, VerticalScrollBarMode, HorizontalScrollBarMode, and so on.
<DxButton Text="Show All Rows" Click="@OnClick" />
<DxDataGrid Data="@Orders" DataNavigationMode="@MyField">
@*...*@
</DxDataGrid>
@code {
// ...
DataGridNavigationMode MyField = DataGridNavigationMode.Paging;
void OnClick(MouseEventArgs args) {
MyField = DataGridNavigationMode.ShowAllDataRows;
}
}
To resolve the issue, do the following:
- Specify the Data Grid’s
@keyattribute. - Generate a new key after the property value is changed to re-render the Data Grid.
<DxButton Text="Show All Rows" Click="@OnClick" />
<DxDataGrid Data="@Orders" DataNavigationMode="@MyField" @key="myKey">
@*...*@
</DxDataGrid>
@code {
// ...
Guid myKey = Guid.NewGuid();
DataGridNavigationMode _MyField { get; set; } = DataGridNavigationMode.Paging;
DataGridNavigationMode MyField {
get {return _MyField; }
set {
_MyField = value;
myKey = Guid.NewGuid();
}
}
void OnClick(MouseEventArgs args) {
MyField = DataGridNavigationMode.ShowAllDataRows;
}
}
Scheduler-Related Issues
MissingMethodException
You may see the following exception in a browser when you use Blazor WebAssembly Scheduler:
System.MissingMethodException: Constructor on type ‘System.ComponentModel.Int32Converter’ not found.
To resolve this issue, do one of the following:
- Set the
BlazorWebAssemblyEnableLinkingproperty to false in the project file to disable the link with an MSBuild property.<PropertyGroup> ... <BlazorWebAssemblyEnableLinking>false</BlazorWebAssemblyEnableLinking> </PropertyGroup> - Add the LinkerConfig.xml file and include the following code:
Then specify this file as an MSBuild item in the project file.<?xml version="1.0" encoding="UTF-8" ?> ... <linker> ... <assembly fullname="System"> <!-- Use this line to include the entire assembly. --> <type fullname="System.ComponentModel*" /> <!-- Uncomment the following lines to include individual types. --> <!-- <type fullname="System.ComponentModel.Int32Converter*" /> <type fullname="System.ComponentModel.BooleanConverter*" /> <type fullname="System.ComponentModel.DateTimeConverter*" /> <type fullname="System.ComponentModel.StringConverter*" /> --> ... </assembly> </linker><ItemGroup> ... <BlazorLinkerDescriptor Include="LinkerConfig.xml" /> </ItemGroup>
See the following topic for more information: Configure the Linker for ASP.NET Core Blazor.
Editors-Related Issues
System.ArgumentNullException: ‘X’ requires a value for the ‘Expression’ property
This is a common Blazor exception that occurs if an EditForm’s editor does not use two-way binding.
DevExpress.Blazor.DxComboBox requires a value for the ‘ValueExpression’ property. It is specified automatically when you use two-way binding (‘bind-Value’).
To fix the issue, do one of the following:
- Specify the Expression property for the properties you use. For example, if you use the Value property and the ValueChanged event separately, also specify the ValueExpression property.
<DxComboBox Data="@Strings" Value="@Value" ValueChanged="@ValueChanged" ValueExpression="@(() => Value )"> </DxComboBox> - Implement the two-way binding in the EditForm.
Tabs-Related Issues
Tabs are rendered incorrectly when the default Microsoft template is applied
If you create a new Blazor project based on the default Microsoft project template, the first tab of the DxTabs component can be rendered incorrectly.
See the following Microsoft issues that cause this behavior:
To resolve the issue, specify strict style rules in the site.css file to apply .navbar templates only.