Suggestion AND BUG FOUND - Desperate Request - Keep Third Party Scripts SEPARATE for bugs and maintenance approach
Hey Sean
As you know - I do love this theme with all my heart.. but I've found a central approach adopted by the architecture for third party scripts to be a nightmare.
ISSUE:
When the scripts are compiled with gulp/webpack from the base src into the demo/production versions, and put into a single plugins.bundle.js for external /third party plugins, this has led to multiple hair-pulling trouble-shooting, conflict resolution, and updating sessions.
..by way of illustration for a real issue:
BUG FOUND:
Re Tagify, used in Modals, there is a bug that causes the modal to scroll-to-top when a tagify selection is made (via a direct click on an option). I spent lots of time quarantining the files and re-creating the issue, and I can 100% say it's located in the plugins.bundle.js-> "Bootstrap v5.2.0-beta1 (https://getbootstrap.com/)".
(btw, why-oh-why did you bundle BETA!!!??? very very bad practice .. betas are for dev purposes and should NOT have been bundled with Metronic.)
It took me AGES to locate this bug.. probably 3 days worth of bug re-creation and finding - though it was because I had initially assumed my code was at fault. But i recreated the bug outside of Metronic by setting up a working version, then adding link to the plugin.bundle.js which introduced the bug. I resolved the bug by completely remove bootstrap beta from plugin.bundle.js, and using the latest bootstrap.
REQUEST:
Please do not compile 3rd party scripts to a plugins.bundle.. preferably, could you create a file that references/add all these plugins like an includes file? like an autoload in composer? So I can simply update the underlying 3rd party scripts individually when fixes arise from the authors?
Also, please please do not use BETA libraries.
Muchas gracias..
Replies (7)
I totally get where you're coming from with the issue around the third-party scripts. It's been quite a headache for me as well. I recently spent days troubleshooting a bug in Tagify, used in Modals, where selecting an option caused the modal to scroll to the top. After isolating everything, I traced the issue back to the plugins.bundle.js, specifically with the inclusion of Bootstrap v5.2.0-beta1, which was causing the problem.
It took me nearly 3 days to figure it out, and I had to remove the beta version of Bootstrap and replace it with the latest stable version to resolve it. I agree with your point—betas shouldn't be bundled in production releases!
On top of that, I strongly recommend keeping third-party scripts separate, maybe as an "autoload" file for easier individual updates. That way, it’s simpler to stay current with fixes from plugin authors without all the conflicts.
By the way, while I was dealing with this, I thought about how a fue hair transplant can sometimes feel like this—months of researching, testing, and waiting, until you finally get the result you were looking for!
Hope this helps, and thanks for considering the suggestion!
Anybody dealing with this ? Tagify still does not work in modal.
Even in the preview (https://preview.keenthemes.com/metronic8/demo1/toolbars/accounting.html) does not work.
HELP!
Hi Diana, very randomly checking my emails and didn't think I'd be dealing with this issue again.
Conversations and workarounds on github: https://github.com/yairEO/tagify/issues/1170
https://github.com/twbs/bootstrap/issues/37881
And who did I see there?! : Diana-Alex-Rodrigues
LOL..
I'll post my response there so it's in a source location for the author and bootstrap.
I eventually abandoned tagify for this and a few other reasons.. such as the library not being well suited for data manipulation, difficulty in accessing data on the dom nodes, headaches for form submission, results manipulation, retaining settings for sessions, rebuilding modal after closing/reopening etc. If you're just a front-end design/developer this might not be a consideration for you at this stage, but could come back to bite you on the refactoring later down the track. I wasted a LOT of time trying to get tagify to do all these things.
Hi,
Sorry for the inconvenience. The reason we want to use the beta version is that we want to adapt the most latest updates for Metronic. If anything happens we will try to downgrade the version.
You can update the 3rd party plugin version from package.json. Reinstall the plugin using "yarn install", then recompile the asset using gulp. This will work to update individual 3rd party plugins.
https://preview.keenthemes.com/html/metronic/docs/getting-started/build/gulp
plugin.bundles.js has already included jquery. Adding external jquery will make it duplicate and conflict.
Thanks
Hi Faizal, I should have responded to this a while back, but the assumption should be that stable releases contain stable libraries.
If you bundle beta anything with your release, you should mark it that version of Metronic being beta / overnight / etc and not a stable release.
Having a stable code is far more important than having the latest of anything with bugs.
Thanks
Thank you for your feedback and suggestion. We will definitely work on improving.
EDIT: It wasn't just a bootstrap BETA issue.. the only bootstrap version that works nicely with tagify is 5.0.2.
EDIT 2: trying to quarantine jquery and bootstrap from plugin.bundles.js has created lots of knock-on issues.. it appears there needs to be a copy of jquery in the plugins.bundle.js for script.bundle.js to work... neither plugins or scripts bundle file work with if jquery is added as a separate file in the <head> of an HTML.
