Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Balzor server with metronic_v8.0.37


Hi,
I'm having problems to run blazor server app with metronic theme. I have followed instructions from https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/integration/blazor.html as well from https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/build/webpack.html?_ga=2.8700854.264215278.1647635383-1870540629.1646945224 but I always end up with error

Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
Unhandled exception rendering component: Cannot set properties of undefined (setting 'moment')
TypeError: Cannot set properties of undefined (setting 'moment')
at http://localhost:5189/assets/plugins/global/plugins.bundle.js:25:168435
at http://localhost:5189/assets/plugins/global/plugins.bundle.js:25:168440
Microsoft.JSInterop.JSException: Cannot set properties of undefined (setting 'moment')
TypeError: Cannot set properties of undefined (setting 'moment')
at http://localhost:5189/assets/plugins/global/plugins.bundle.js:25:168435
at http://localhost:5189/assets/plugins/global/plugins.bundle.js:25:168440
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at app.Shared.MainLayout.OnAfterRenderAsync(Boolean firstRender) in /Users/ivanbabic/Projects/app/Shared/MainLayout.razor:line 10
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Can you please let me know what to do?


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


Hi,

Do you use a webpack to build assets?



There is an issue with your plugins.bundle.js file, try rebuild it with npm in the first instance.

I have this fully running in blazor wasm and haven't seen this issue.



Yes could you please use webpack to build your assets, we will check gulp and fix in in upcoming releases.

Also, notice that our documentation covers the Metronic Blazor Server-side integration only. The Blazor Webassembly is not supported by Metronic at the moment.



Finally it is working! Building with webpack fixes issue. I had problem with webpack, it was necessary to remove line "type": "module", from package.json file. Found this on your videos. As advice for other users, I would suggest to write this comment on Webpack quick start page.

Thanks for replies.

Br,
Ivan



Hi Ivan,

Thank you for your feedback.

It is already mentioned in our doc.
https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/build/webpack.html

Please check highlighted section on step number 7.



You are right, totally missed red part sad sorry and thanks!


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