How to fix your MAUI Blazor app crashing on startup with "Failed to compare two elements in the array." ?

This post was most recently updated on March 25th, 2023.

2 min read.

This article explains how to fix your Blazor Hybrid MAUI application (built with Blazor Webassembly, using MAUI to build & publish for multiple different platforms like Windows, Android and iOS at once) not starting up, but throwing an unexpected error instead, an error message being somewhat along the lines of “Failed to compare two elements in the array.”

What fun, right?

Problem

Table of Contents

Okay, so it’s pretty frustrating: your app won’t start, no breakpoints will be hit, nothing useful will be shown in the app and debugging console is not showing any errors.

Oh, but luckily – there WAS an error in the browser console! Let’s take a look:

Failed to compare two elements in the array.
   at System.Collections.Generic.ArraySortHelper`1.Sort(Span`1 keys, IComparer`1 comparer)
   at System.Array.Sort[T](T[] array, Int32 index, Int32 length, IComparer`1 comparer)
   at System.Collections.Generic.List`1.Sort(Int32 index, Int32 count, IComparer`1 comparer)
   at Microsoft.AspNetCore.Components.RouteTableFactory.Create(Dictionary`2 templatesByHandler)
   at Microsoft.AspNetCore.Components.RouteTableFactory.Create(List`1 componentTypes)
   at Microsoft.AspNetCore.Components.RouteTableFactory.Create(RouteKey routeKey)
   at Microsoft.AspNetCore.Components.Routing.Router.RefreshRouteTable()
   at Microsoft.AspNetCore.Components.Routing.Router.Refresh(Boolean isNavigationIntercepted)
   at Microsoft.AspNetCore.Components.Routing.Router.SetParametersAsync(ParameterView parameters)
NotifyUnhandledException @ blazor.webview.js:1

Uhh… What does that tell us?

Reason

Ok – so taking a look at the error, we have a stack trace that kind of helps.

I mean – it doesn’t have a proper error message or anything. The app fails to compare some elements, without telling what specific elements and where.

But the stack has a clue – RouteTableFactory. The duplicate is in the internal list of Routes Blazor manages for your MAUI application.

Solution

Check your routes for duplicates. It’s a bit annoying you don’t get a proper error message, but you can just ctrl+shift+f “@Page” in Visual Studio to get a list of all Page-directives, which are probably the likeliest way to set a route to cause duplicates (since you set them per-component).

I have no idea where my duplicate route had appeared (I mean, who would copy-paste a component with routes from the internet?), but since my app was small, it was easy enough to spot the duplicates.

That said, if your @Page directives are fine, take a look at your MauiProgram.cs or Program.cs to see if you’re issuing some conflicting directives there.

Hope this helps :)

References

https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-7.0

Author
Recent Posts

Antti K. Koskela

Developer / Speaker / Consultant at Koskila / Precio Fishbone / Norppandalotti Software Co / Alter - Experience Ideas Ltd

Antti Koskela is a proud digital native nomadic millennial full stack developer (is that enough funny buzzwords? That's definitely enough funny buzzwords!), who works as Solutions Architect for Precio Fishbone, building delightful Digital Workplaces.

He's been a developer from 2004 (starting with PHP and Java), and he's been working on .NET projects, Azure, Office 365, SharePoint and a lot of other stuff. He's also Microsoft MVP for Azure.

This is his personal professional (e.g. professional, but definitely personal) blog.

Latest posts by Antti K. Koskela (see all)