Blazor Build Errors on Latest Release

I downloaded the latest Metronic release (8.1) and am looking to use the Blazor template version. Per the instructions found here:

https://preview.keenthemes.com/blazor/metronic/docs/getting-started.html

The last step is to run npm run build and I am getting build errors:

C:\Projects\metronic\blazor_demo1\Starterkit\_keenthemes\tools>npm run build
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> keenthemes@1.0.0 build
> webpack

>> Building metronic bundle...
>> Failed to compile metronic bundle!

ModuleParseError: Module parse failed: Unexpected token (48:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| KTModalCreateProjectFiles.init();
| KTModalCreateProjectComplete.init();
> });
|
| // Webpack support
ERROR in ../src/js/custom/utilities/modals/create-project/main.js 48:0
Module parse failed: Unexpected token (48:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| KTModalCreateProjectFiles.init();
| KTModalCreateProjectComplete.init();
> });
|
| // Webpack support

ERROR in ../src/js/custom/utilities/modals/offer-a-deal/main.js 45:0
Module parse failed: Unexpected token (45:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| KTModalOfferADealFinance.init();
| KTModalOfferADealComplete.init();
> });
|
| // Webpack support

webpack compiled with 2 errors

C:\Projects\metronic\blazor_demo1\Starterkit\_keenthemes\tools>

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

I get errors when trying to use gulp or npm run build. I just tried the ASP.NET Core 6 package and got the same set of errors. Need help ASAP please.

This issue should only be in Blazor, in asp.net everything should work fine, do you have exactly the same errors in the asp.net version?

I get exactly the same issue having followed the same article

If you inspect the files you can see that there's some additional control code lingering on the line numbers mentioned in the error.

});

Removing these and running `npm run build` again lead to success

Hi Keith,

It is a bug, we will fix it in upcoming releases.

To fix this now you can update two files that throw an error.

In the file, Starterkit/_keenthemes/src/js/custom/utilities/modals/create-project/main.js remove a code part below.

KTModalOfferADeal.init();
KTModalOfferADealType.init();
KTModalOfferADealDetails.init();
KTModalOfferADealFinance.init();
KTModalOfferADealComplete.init();
});

and in file Starterkit/_keenthemes/src/js/custom/utilities/modals/create-project/main.js the code below.

KTModalCreateProject.init();
KTModalCreateProjectType.init();
KTModalCreateProjectBudget.init();
KTModalCreateProjectSettings.init();
KTModalCreateProjectTeam.init();
KTModalCreateProjectTargets.init();
KTModalCreateProjectFiles.init();
KTModalCreateProjectComplete.init();
});

Although that did correct the build errors, once I begin to test the StarterKit, the fonts are missing. It doesn't look like the HTML template fonts. What do I need to change to fix that?

Do you have font link below in your page head?

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700">

Yes, that is there, but in the HTML demo, the font is Inter:

https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700

It was mistaken, you can update the font style in file Starterkit/appsettings.json.

In Fonts array change the link from:

https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700

to
https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700

Although I changed the font from Poppins to Inter, the font is slightly different like there is a higher weight on the live preview on the keenthemes site. Here is my localhost from the starter kit:
metronic-811-demo1-starterkit

And this is the preview on the keenthemes website:
metronic-811-demo1-preview

Hi,

To fix this you need to change class from fw-semibold to fw-bold.

We will include a fix for this issue in an upcoming release.

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