Issue with Blazor Server after integration

All methods have been used to run metronic8 theme18 in blazor server,But the theme didn't work properly every time

*******method 1*******

1- The method was followed as described in your link:

build assets by using webpack
https://preview.keenthemes.com/metronic8/demo18/documentation/getting-started/integration/blazor.html

I have error when load our js components and plugins files asynchronously as shown below:

@inject IJSRuntime JS
@inject NavigationManager MyNavigationManager

@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeAsync("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/global/plugins.bundle.js"));
await JS.InvokeAsync("import", MyNavigationManager.ToAbsoluteUri("assets/js/scripts.bundle.js"));

}
}
}

[2022-02-21T21:02:30.853Z] Error: Microsoft.JSInterop.JSException: Cannot set properties of undefined (setting 'moment')
TypeError: Cannot set properties of undefined (setting 'moment')
at https://localhost:44343/assets/plugins/global/plugins.bundle.js:25:168435
at https://localhost:44343/assets/plugins/global/plugins.bundle.js:25:168440
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at WebApplication1.Shared.MainLayout.OnAfterRenderAsync(Boolean firstRender) in C:\Users\hp\Desktop\New folder (21)\blazor\WebApplication1\WebApplication1\Shared\MainLayout.razor:line 7610
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

=========================================================

******* method 2 *******

I'm using (components initialization) from External file js

1-External file js Scriptinitial.js put in _hots.cshtml

this Scriptinitial.js contains the following code :

function initial() {
// Boostrap & 3rd-party components initialization

KTApp.init();
// In-house components initialization
KTMenu.createInstances();
KTDrawer.createInstances();
KTScroll.createInstances();
KTScrolltop.createInstances();
KTSticky.createInstances();
KTDialer.createInstances();
KTImageInput.createInstances();
KTPasswordMeter.createInstances();
KTSwapper.createInstances();
KTToggle.createInstances();

}

2- call this function in layout as the following code :

protected override async Task OnAfterRenderAsync(bool firstRender=false)
{
if (firstRender)
{
await JsRuntime.InvokeVoidAsync("initial");
StateHasChanged();
}
}

but something not work fine such as [dropzone,Editor,tags in product , charts modal steps ..etc] maybe this script blazor.server.js conflict with another script in metronic8

If you need to upload the blazor server with metronic8 drive
Or send a demonstration video tell me about it

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 (5)

Hi,

Yes, we reproduced this issue, we will check it and fix it as soon as possible.

The issue appears only when you bundle assets with a gulp, webpack seems to be working fine.
Could you please try to rebuild your assets with a webpack?

Check our webpack build doc:
https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/build/webpack.html

Hi,
I'm used build assets by using webpack

https://preview.keenthemes.com/metronic8/demo18/documentation/getting-started/integration/blazor.html

I have error when load our js components and plugins files asynchronously as shown below:

@inject IJSRuntime JS
@inject NavigationManager MyNavigationManager

@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeAsync("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/global/plugins.bundle.js"));
await JS.InvokeAsync("import", MyNavigationManager.ToAbsoluteUri("assets/js/scripts.bundle.js"));

}
}
}

[2022-02-21T21:02:30.853Z] Error: Microsoft.JSInterop.JSException: Cannot set properties of undefined (setting 'moment')
TypeError: Cannot set properties of undefined (setting 'moment')
at https://localhost:44343/assets/plugins/global/plugins.bundle.js:25:168435
at https://localhost:44343/assets/plugins/global/plugins.bundle.js:25:168440
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at WebApplication1.Shared.MainLayout.OnAfterRenderAsync(Boolean firstRender) in C:\Users\hp\Desktop\New folder (21)\blazor\WebApplication1\WebApplication1\Shared\MainLayout.razor:line 7610
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Maybe there is something wrong
Can you provide me assets files that built by you from Webpack ?

Hi,

We were bundling assets using a default webpack.config.js from the tools folder.

1) Navigate your terminal to the tools folder.
2) Run npm install to install dependencies.
3) Run npm run build to build assets.

I did exactly that,but have error when load our js components and plugins files asynchronously as shown below:

@inject IJSRuntime JS
@inject NavigationManager MyNavigationManager

@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeAsync("import", MyNavigationManager.ToAbsoluteUri("assets/plugins/global/plugins.bundle.js"));
await JS.InvokeAsync("import", MyNavigationManager.ToAbsoluteUri("assets/js/scripts.bundle.js"));

}
}
}

[2022-02-21T21:02:30.853Z] Error: Microsoft.JSInterop.JSException: Cannot set properties of undefined (setting 'moment')
TypeError: Cannot set properties of undefined (setting 'moment')
at https://localhost:44343/assets/plugins/global/plugins.bundle.js:25:168435
at https://localhost:44343/assets/plugins/global/plugins.bundle.js:25:168440
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at WebApplication1.Shared.MainLayout.OnAfterRenderAsync(Boolean firstRender) in C:\Users\hp\Desktop\New folder (21)\blazor\WebApplication1\WebApplication1\Shared\MainLayout.razor:line 7610
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Hi,

It looks like your assets in wwwroot wasn't updated.
Just to verify that you really using assets bundled with webpack, can you delete wwwroot/assets folder and then run the build assets command again with npm run build?

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  :(