New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

Could not find 'KTComponent.init' ('KTComponent' was undefined). Blazor Server 9


Please find below error which i getting in my blazor server .net 9, i also download you sample code from git and followed same step. i just change demo layout resting ok. could please let me know where i am wrong.

blazor.web.js:1 [2025-08-29T13:03:20.377Z] Error: Microsoft.JSInterop.JSException: Could not find 'KTComponent.init' ('KTComponent' was undefined).
Error: Could not find 'KTComponent.init' ('KTComponent' was undefined).
at blazor.web.js:1:384
at Array.forEach (<anonymous>)
at l.findFunction (blazor.web.js:1:352)
at _ (blazor.web.js:1:5101)
at blazor.web.js:1:2894
at new Promise (<anonymous>)
at w.beginInvokeJSFromDotNet (blazor.web.js:1:2857)
at vn._invokeClientMethod (blazor.web.js:1:65750)
at vn._processIncomingData (blazor.web.js:1:63139)
at :5001/connection.onr…or.web.js:1:56780)
at :5001/Microsoft.JSIn…er, Object[] args)
at :5001/Microsoft.JSIn…er, Object[] args)
at :5001/Truesys.Web.Ap…t.razor.cs:line 34
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(:5001/Task taskToHan…wningComponentState)

also set this invoke code in my page.
MainLayout.razor
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JS.InvokeVoidAsync("KTComponent.init");
await JS.InvokeVoidAsync("KTLayout.init");
await base.OnAfterRenderAsync(firstRender);
}


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


I’ve run into a similar issue before when using Blazor Server with custom layouts. In my case, the error happened because the JS libraries weren’t being loaded in the correct order. Make sure that:

The KTComponent script is properly referenced in your _Layout.cshtml or index.html before Blazor scripts.https://devs.keenthemes.com/question/could-not-find-ktcomponentinit-ktcomponent-was-undefined-blazor-server-9#

If you’re using OnAfterRenderAsync, wrap the JS.InvokeVoidAsync calls in a firstRender check, otherwise it will throw errors on every render.

Verify that KTLayout.init is available in the same scope as your component render.

You can see a breakdown of steps I followed here:
which helped me fix initialization problems on .NET 9.



Hi,

Sorry for the late reply.

Did you follow our Blazor integration guide?
https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/blazor-server

Make sure that you build tailwind styles using npm run build:css.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(