Our site has been getting these recurring errors which I cannot track down and just needed some guidance. Each error revolves around jQuery and Bootstrap 4.6 methods as not a function. Here's what I've done so far:
- Made sure jQuery is loaded first and all other scripts are dependent on jQuery
- Made sure all of our jQuery-dependent scripts are loaded in the footer (our site loads jQuery in the header...is this correct?)
- Tried calling methods in the following ways:
// One
jQuery('#example-modal').modal('show');
//Two
$('#example-modal').modal('show');
// Three
jQuery(($) => { $('#example-modal').modal('show') });
Here is how we're loading the scripts:
// Popper
wp_enqueue_script( 'popper-js', get_template_directory_uri() . '/assets/js/popper.min.js', array( 'jquery' ), $version, true );
// Bootstrap (in footer??)
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array( 'jquery', 'popper-js' ), $version, true );
// Theme
wp_enqueue_script( 'theme-js', get_template_directory_uri() . '/assets/js/theme.bundled.js', array( 'jquery', 'bootstrap-js' ), $version, true );
These methods work for me all the time on a mac with FireFox, but I'm still getting them in Sentry. I've noticed the vast majority (96%) is on Windows >= 10.
Here are some some links to the error:
For more context, I write JS in almost exclusively vanilla JS until I need a Bootstrap method. Am I missing something? This is driving me a little crazy.
