Scripts.Bundle.Js file not building correctly

Hi,
I'm trying to use the Metronic Demo 2 and I found that the scripts.bundle.js file isn't being built the same way the demo builds it. Because of this any (all) of the Metronic in house components (the ones location in the KTComponents var) do not work. The 2 I'm trying to use are Drawer and Menu and they don't work unless I copy the scripts.bundle.js file from the demo folder into the folder I have the production version of it in and overwrite it.

It looks like the scripts.bundle.js is placing the var KTComponents at the top of the js file which when called on page load is initializing those components with nothing for them to active on since there is no elements in the DOM.

I'm currently using Gulp to build the assets. Is there somewhere I can look to see why Gulp might be building the production assets differently than the demo assets?

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

Hi,

Are you working on the HTML version? For the demo folder, we build the assets using gulp as well.
Could you please try to update node.js to the latest version 19?

Thanks

Hi,
I am working on the HTML version. So I'll explain my situation a little better. I'm using a submodule to build the assets in a docker container and place them in the main repo. I finally got it working on the repository itself (it has node v18), but I still can't get it to build correctly in with the asset repo as a submodule.

If it helps I also upgraded from version 8.0.37 to latest(8.1.6 at time of post). I've got ever other part of it working with the big jump in versions except the JS building correctly.

Is it possible that Gulp is building the scripts.bundle.js out of order by a slim margin (since it's in a container it may not be as fast as on the local system) and that is placing code out of order?

Also here is the slice of code that is getting placed incorrectly which is breaking the entire script file:

//
// Global init of core components
//

// Init components
var KTComponents = function () {
// Public methods
return {
init: function () {
KTApp.init();
KTDrawer.init();
KTMenu.init();
KTScroll.init();
KTSticky.init();
KTSwapper.init();
KTToggle.init();
KTScrolltop.init();
KTDialer.init();
KTImageInput.init();
KTPasswordMeter.init();
}
}
}();

// On document ready
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", function() {
KTComponents.init();
});
} else {
KTComponents.init();
}

// Init page loader
window.addEventListener("load", function() {
KTApp.hidePageLoading();
});

// Declare KTApp for Webpack support
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
window.KTComponents = module.exports = KTComponents;
}

That is being placed at the very top of the scripts.bundle.js doc.

Hi,

If you check the precompiled scripts.bundle.js file provided, the _init.js file content is at the bottom just below the KTUtil. We compile it using Gulp.

Please try to update the gulp-cli as well.

npm i -g gulp-cli

image

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