'Bootstrap modal works fine locally, but gives TypeError when deployed live

I am using the Start Bootstrap Freelancer theme and have added the exact same styles and scripts to my project as are included in this repo. When testing locally, the modals work perfectly fine and the app encounters no errors. After deploying, the site loads fine and everything looks correct so the imported bootstrap libraries are being loaded. When trying to open a modal, nothing happens, and in the browser console it shows the following error Uncaught TypeError:

modal.js:313 Uncaught TypeError: Cannot read properties of undefined (reading 'classList')  modal.js:313
    at Hi._isAnimated (bootstrap.bundle.min.js:6:53067)
    at Hi._initializeBackDrop (bootstrap.bundle.min.js:6:51282)
    at new Hi (bootstrap.bundle.min.js:6:49838)
    at Function.getOrCreateInstance (bootstrap.bundle.min.js:6:6729)
    at HTMLDivElement.<anonymous> (bootstrap.bundle.min.js:6:54365)
    at HTMLDocument.n (bootstrap.bundle.min.js:6:4406)

This is happening on a heroku deployment, github pages, and docker. I've tried updating to the latest bootstrap, downloading the styles and scripts and calling them locally, changing the location of the modals in the html, and even removing the custom styles altogether and just using the default bootstrap scripts. It seems that the getInstance(element) function in the bootstrap script is returning null. I'm not sure what is causing this, and why I can't seem to reproduce it locally. Any help would be greatly appreciated, thanks.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source