How to stop Joomla 4 from loading collapse.min.js in my template

Question

I built a custom Joomla 4 template and unfortunately Joomla is automatically loading collapse.min.js

When I view the page source I see this in the head:

<script src="/media/vendor/bootstrap/js/collapse.min.js?5.1.3" type="module"></script>

This is conflicting with the curated Boostrap 5 files that my template already loads. The result that anything in my template that uses Bootstrap collapse (accordion, navbar) is broken.

Interestingly, this does not happen on my local (WAMP) environment. How do I prevent Joomla from loading collapse.min.js in my template?

Answer 1

If you want to load a single file instead of separate Bootstrap components, you can declare the asset in your template's joomla.asset.json file. Note you will need to do this for all Bootstrap components.

{
  "name": "bootstrap.collapse",
  "type": "script",
  "uri": "your-bootstrap-file.min.js",
  "attributes": {
    "type": "module"
  },
  "version": "5.1.3"
}

If you're loading split files like the core ones, you can create overrides by placing your files in the appropriate directory. In this case that would be:

templates/[your_template]/js/vendor/bootstrap/collapse.min.js

Or, if you're creating an "inheritable" template (feature introduced in Joomla 4.1):

media/templates/site/[your_template]/js/vendor/bootstrap/collapse.min.js