Currently using the NPM build of Bootstrap (with Gulp) for a custom WordPress theme, and I seem to be facing some issues. While I am new to Bootstrap, I have previous experience with WordPress and Gulp (primarily with Foundation).
Below is how I am including the Bootstrap files:
// Defining the path to Bootstrap files
const BOOTSTRAP = 'node_modules/bootstrap';
// Selecting Bootstrap components while removing those not needed for the project
const SOURCE = {
scripts: [
// Bootstrap core
BOOTSTRAP + '/dist/js/bootstrap.js',
// Including specific components required for the project
BOOTSTRAP + '/js/dist/carousel.js',
// Adding custom JS here, which will be concatenated
'assets/scripts/js/**/*.js'
],
// SCSS files to be concatenated
styles: ['assets/styles/scss/**/*.scss'],
};
Here's a snippet of my carousel markup:
<?php
$testimonial_args = array(
'post_type' => 'testimonial',
);
$testimonial_query = new WP_Query( $testimonial_args );
?>
<div id="testimonial-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
$testimonial_integer = 0;
if ( $testimonial_query->have_posts() ) :
while ( $testimonial_query->have_posts() ) : $testimonial_query->the_post(); $testimonial_integer++;?>
<div class="carousel-item <?php if ( 1 === $testimonial_integer ) { echo 'active'; } ?>">
<?php the_title(); ?>
<?php echo get_field('position'); ?>
<?php echo get_field('city_state'); ?>
<?php the_content(); ?>
</div>
<?php
endwhile;
wp_reset_postdata();
endif;
?>
</div>
<a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Despite nothing significantly different in the setup, I'm encountering this console error:
scripts.js?ver=5.8.3:1 Uncaught TypeError: Super expression must either be null or a function
at _inherits (scripts.js?ver=5.8.3:1:6106)
at scripts.js?ver=5.8.3:1:77341
at scripts.js?ver=5.8.3:1:84943
at scripts.js?ver=5.8.3:1:76256
at scripts.js?ver=5.8.3:1:76312
This error only appears when I include the carousel JS file. However, after reviewing the JS file, the error doesn't seem to be within it.
I came across a suggestion that updating to a newer version of Bootstrap could resolve this issue, but with NPM, I should already have the latest version. I even ran npm update just to be sure.
I suspect there might be another JS file that needs to be included, but I'm unsure of which one. Any insights would be greatly appreciated.