Updating Android SDKs from Visual Studio

Recently I ran into an issue with a Blazor Hybrid application. The app compiled, and ran just fine on web and desktop, however I immediately hit an exception on Android.

Uncaught TypeError: t.split(...).at is not a function", source: https://0.0.0.0/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js (28)

This ugly and cryptic error didn’t make much sense at first. The problem appears to come from the Telerik UI for Blazor component library, although it’s not actually the real reason for the exception. If we take a closer look we can see the real reason t.split(...).at is not a function is the true root of the problem. But why on Android only, and what is making it happen.

The WebView

Blazor Hybrid applications rely heavily on a WebView. The WebView is a browser which is embedded in the Blazor Hybrid app. The WebView implementation can vary from device to device. For most modern Android systems the WebView is the latest version of the Chrome browser. However, for my environment I had an emulated device that was using an older version of the Android SDK, thus the WebView implementation was outdated.

Outdated WebView

The error in this case was actually caused by the outdated WebView. The WebView was too old to support the at function in JavaScript, a function that was being called by Telerik UI for Blazor’s JavaScript interop to set up a complex PDF Viewer component. If we take a quick look at CanIUse, the at function was supported in Chrome 92, which means the WebView predates 2021. To fix this issue the emulated device needs an update.

Updating the Android SDK from Visual Studio

I’m using Visual Studio for all of my development. It comes with built-in dialogs for the Android SDK Manager, and Andriod Device Manager. To update the SDK on my system, I had to follow these five simple steps.

  1. Open the Android SDK manager from Visual Studio. TOOLS > Android > Android SDK Manager

Visual Studio's Tools Menu: Android SDK Manager is highlighted.

  1. In the Android SDKs and Tools dialog, look for a button on the lower left labeled “(n) updates” and apply all updates where (n) is the number of updates to apply, the button is not shown if updates are not available. Then choose the SDK Platform (lastest) and apply it.

Visual Studio's Android SDK and Tools dialog. The Updates Available, Apply Changes, and Android SDK versions locations are all highlighted.

  1. Open the Android Device Manager from Visual Studio. TOOLS > Android > Android Device Manager.

Visual Studio's Tools Menu: Android Device Manager is labeled.

  1. Choose your Android image, from the device list.

The Android Device Manager Dialog, a device is labeled.

  1. Apply the latest SDK as the OS for that device.

The Device dialog, the OS version is highlighted.

One the device is updated, restart Visual Studio.

I had to restart Visual Studio after the update. Before restarting Visual Studio, I received a long list of compiler errors. My theory is that VS still had processes running during the update process and could not see any of the Android SDKs. Restarting Visual Studio reset those processes.

Conclusion

It’s probably a good idea to update your Android SDKs regularly. Even if you’re not running into immediate errors, it will help ensure your device image has the feature capabilities you’re targeting with your app, and reduce time spent troubleshooting.

Note: I had to restart Visual Studio after the update. Before restarting Visual Studio, I received a long list of compiler errors. My theory is that VS still had processes running during the update process and could not see any of the Android SDKs. Restarting Visual Studio reset those processes.

Ed Charbeneau

Ed Charbeneau

I'm Ed Charbeneau, web enthusiast, speaker, writer, design admirer, and Developer Advocate for Progress.