Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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);
}


user
ANIL RAVRANI 10 months ago
Metronic Asp.Net Core Tailwind 4
2 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

user
jade wiza 9 months ago

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.


user
Lauris Stepanovs Author 9 months ago

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(