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

scripts.bundle.js broken


Hello,

I have followed the instructions to run the npm install and gulp commands and created a new project. Note - webpack did not build even after removing the type: module line.

The site loads but accessing any items in the menu or header areas doesn't load any content.

The developer console is showing 'unreachable code after return statement in the scripts.bundle.js'

I was seeing another warning in the CSS but was able to resolve it using these forums and adding the if(firstrender) to the layout areas above the code lines -

JS.InvokeVoidAsync("KTModalUpgradePlan.init");
JS.InvokeVoidAsync("KTCreateApp.init");
JS.InvokeVoidAsync("KTModalUserSearch.init");
JS.InvokeVoidAsync("KTModalNewTarget.init");
JS.InvokeVoidAsync("KTAppSidebar.init");

I have tried swapping out the scripts.bundle.js with the original one from the blazor demo folder without any success.

Any ideas on what the problem is? my nvm list command shows node.js 18.14.2.

Also, I see there are no Nuget packages in the solution. This is totally fine but a new blazor project in Visual Studio has the webassembly packages and another site I have using Metronic source code has nuget packages for things like toastr. Can you provide any clarity on this?

Here's the block in scripts.bundle.js - It errors right above toastr.success -

// Class definition
var KTAppLayoutBuilder = function () {
var form;
var actionInput;
var url;
var previewButton;
var exportButton;
var resetButton;

var handlePreview = function () {
previewButton.addEventListener("click", function (e) {
e.preventDefault();

// Set form action value
actionInput.value = "preview";

// Show progress
previewButton.setAttribute("data-kt-indicator", "on");

// Prepare form data
var data = $(form).serialize();

// Submit
$.ajax({
type: "POST",
dataType: "html",
url: url,
data: data,
success: function (response, status, xhr) {
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
}
location.reload();
return;

toastr.success(
"Preview has been updated with current configured layout.",
"Preview updated!",
{ timeOut: 0, extendedTimeOut: 0, closeButton: true, closeDuration: 0 }
);

setTimeout(function () {
location.reload(); // reload page
}, 1500);
},


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 Alexander,

Thank you for reaching out to us.

We already know about webpack issue, it will be fixed in the next release, for now to bundle assets you can use our gulp task or refer to webpack configuration in this gist file.

Please not that our Blazor version is a Starterkit, which contains a fully functional layout and a few pages for start (New Password, Reset Password, Sign In, Sign Up, Default Dashboard Page, error 500 and error 404 pages). We will be adding new pages in upcoming releases, we have plans for User Managment App, System Settings page, and Audit Log page implementation.

You can easily add any other pages by referring to our HTML version, all JS, and CSS code required for any page is already included in our Blazor Starterkit, all you need to do is just copy HTML markup and initialize JS file on your view (if it is required).

Unfortunately, we were not able to reproduce this toatr error.

Have you modified anything in our codebase?

Also, could you please attach your error message?

Regards,
Lauris Stepanovs,
Keenthemes Support Team



I was looking at the light sidebar and light header layouts. I think I have everything I need to get going on my project.

Thank you for all the clarification. I won't hesitate to communicate with support if there is anything else that I need.



Hi Alexander,

You can use Starterkit/Shared/Layout/DefaultLightSidebar.razor layout which has light sidebar and light header.

Yes, let me know if will need any help.

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

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply