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

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..

happy


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)


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.



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.



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.


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