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?
Replies (4)
I ran into a similar issue when trying to set up a custom build with Metronic. I realized the problem was with the way the scripts.bundle.js was being bundled during the Gulp task. It seems like Gulp might not be picking up the correct order for your components, causing KTComponents to initialize prematurely. I had to dig through my build tasks and ensure the scripts were being concatenated in the same order as in the demo. It might be worth checking your Gulp config for any discrepancies in the task order. By the way, I remember when I was working on some Scale models in riyadh, it was a similar issue with asset ordering, so I understand how tricky this can be!
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<img src="https://i.ibb.co/jDwx5Bg/image.png" alt="image" border="0">
Thanks
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.
