You may get runtime error messages in the browser console similar to the following:
Could not find 'TelerikBlazor.getLocationHost' ('TelerikBlazor' was undefined).
Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor' in 'window'.
If you get such errors, the reason may be:
- The JS Interop file is missing or the URL is wrong
deferattribute causes the script to load and execute too late
- The Blazor framework initializes too early
exportsworkaround break Telerik Blazor
You can check if this is the case by inspecting the Network tab of your browser console to see if it is returning successfully. There are a few common causes for the JS Interop file to be missing:
The application is missing references to the needed assets.
Network setup blocks access to the cloud, and thus, to our CDN. If this is the case, you have two options:
- Discuss the case with your network administrators to have our CDN allowed.
- Use static assets from the app folder to avoid going to the cloud.
The application was upgraded from a trial to a commercial license, but the path to the file was not. See the Upgrade from Trial to Commercial section for details.
Static assets are not enabled on the server project, or the hosting environment does not work well with them. You need to ensure that the static assets are available after the build and on the deployment server - they are in the local NuGet cache, under a path similar to
C:\Users\<theUser>\.nuget\packages\telerik.ui.for.blazor\<theVersion>\staticwebassets. It is also possible that the hosting server does not support static assets or has issues with them and you may need to confirm this with the hosting provider or by testing with a simple package having a static asset to see whether it gets returned.
Clearing the NuGet cache, then running a
Rebuildon the solution may fix the problem in case something went wrong with fetching the NuGet package. In case
Cleandoes not clean up the
objfolders, you can also delete them manually before
- Clearing the NuGet cache, then running a
A problem occurs during the deployment. See the Deployment Troubleshooting article for more details.
Sometimes, the JS Interop file is referenced correctly and returns successfully, but occasionally you get the error. This indicates a timing issue (for example, low machine performance or slow network) that causes the script to load and be parsed too late, after it is needed.
The solution is to:
- Remove the
deferattribute of the
- Move the
<script>tag after the Blazor framework script (
defer improves the performance of your app by not making the script a blocking resource.
<head> <!--<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>--> <head> <body> <script src="_framework/blazor.....js"></script> <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script> </body>
Instead of removing the
defer attribute above, you can disable the automatic client-side initialization of Blazor.
By default, TypeScript results in compiled code that needs the
exports object, and that is not available in Blazor by default, so it throws an error. A common workaround for that (defining an empty
exports object) causes errors from the Telerik JS Interop files. You can read more about the errors and the solutions in the TypeScript Exports error breaks Telerik Blazor Knowledge Base article.
The error message may mention a component or feature initialization method, for example:
Error: Microsoft.JSInterop.JSException: Could not find 'initGrid' in 'window.TelerikBlazor'.
Error: Could not find 'TelerikBlazorPopup' in 'window'.
Error: Could not find 'TelerikBlazor.columnResizableSetColumns' ('columnResizableSetColumns' was undefined).
- Any error referring to a Telerik component or feature that cannot be found in the JS code.
Such an error means that the
telerik-blazor.js script file version does not match the NuGet package version. As a result, the script does not include all components, features or correct method names.
If you use our CDN to load the script file, make sure the file URL matches the package version. If you load the script as a local file from the
wwwroot folder, then replace the file. See the Upgrade Process article for details.
Another common reason is browser caching, if the file comes from the static NuGet assets or a local folder. Clear the browser cache or "hard refresh" the page to fix that. A real server should look at the modified date of those files and serve them fully when they have been upgraded, so in a production environment this should not occur, but a development server is more likely to return a "not modified" response even after the file was updated.
The error message may also mention
removeEventListener instead of
One is related to UI for Blazor update in WebAssembly (WASM) projects. See the article
TypeError: Cannot read properties of null (reading 'addEventListener').
- Do not call
EventCallbackmethods (e.g. Button click handlers). Blazor executes
StateHasChanged()automatically in such cases.
- Throttle the user behavior, so that rapid subsequent navigation is not possible.
Under IE, you may get errors similar to
Object doesn't support property or method 'assign' or errors that relate other modern JS features that are not supported under IE. The reason is that we use modern code that may not work under IE - it is not one of the browsers we support, and WebAssembly does not work on it anyway, so modern Blazor apps won't run on IE regardless.