Accessing Bootstrap javascript constructors

[alexatlevel]

Accessing Bootstrap javascript constructors

[alexatlevel]

Here's some more discussion on a similar issue: https://stackoverflow.com/questions/64113404/bootstrap-5-referenceerror-bootstrap-is-not-defined

The parent Understrap theme calls the module like export { default as Carousel } from 'bootstrap/js/src/carousel'; and the child Understrap-Child theme does it like import Carousel from 'bootstrap/js/dist/carousel then export {Carousel}

Given that, I tried:

    let testimonialCarousel = new bootstrap.Carousel(document.getElementById('#testimonial-carousel'));
    testimonialCarousel.show();

But then get "Uncaught ReferenceError: Carousel is not defined"

So how do we call Bootstrap modules?

[IanDelMar]

Is

let testimonialCarousel = new bootstrap.Carousel(document.getElementById('#testimonial-carousel'));
testimonialCarousel.show();

a separate script or is it bundled in theme.js?

[alexatlevel]

It's in a stand alone script on the page, like the Bootstrap documentation instructs.

…

On Mon, Feb 5, 2024, 11:19 AM IanDelMar ***@***.***> wrote: Is let testimonialCarousel = new bootstrap.Carousel(document.getElementById('#testimonial-carousel'));testimonialCarousel.show(); a separate script or is it bundled in theme.js? — Reply to this email directly, view it on GitHub <#2178 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AU2WSIFBX2ROXQDEML547RTYSEIBBAVCNFSM6AAAAABCXISGMKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRXGUYTIOBYHA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[IanDelMar]

Then using let testimonialCarousel = new understrap.Carousel(document.getElementById('#testimonial-carousel')); instead will most likely solve the problem.

The name of the bundle is set in rollup.config.js

understrap/src/build/rollup.config.js

Line 76 in 1a9b9af

name: 'understrap',

So it might be different from "understrap" in a child theme.

[alexatlevel]

Thanks @IanDelMar and great to see your name here. That did the trick. Is this a normal / expected way to call a module wrapped up in an application like this? I ask because this flummoxed two developers for a week. Maybe we're just not that experienced, but this seems like an unexpected way of calling a packaged module.

-Alex

[IanDelMar]

Great it works!

great to see your name here

It took me a while to figure out what this was about 😄 I didn't recognise you at first.

Is this a normal / expected way to call a module wrapped up in an application like this?

I guess it depends on your typical use cases. This might make sense if you think of Understrap as a starter theme. Then, often, the bundle's name is irrelevant. You import the Carousel component into your js-file and use new Carousel() instead of new bundleName.Carousel(). And if you split the script into different files, you usually know the bundle's name.
If you think of Understrap as a parent theme that has to provide all of Bootstrap's JS, it would probably be best to ship the pre-built Bootstrap dist files. I have never used it as a parent theme.

[IanDelMar]

Related: #1583

[bacoords]

Closing this now that we've added a note to the docs about this. Feel free to reopen if there's anything I missed

[alexatlevel]

Thanks @bacoords

We're still struggling with this. It seems so unnecessarily complicated!

We're now trying to initialize and show toasts.

If we add this to the footer, it works fine:

<script>
const sessionToastEl = document.getElementById('session-toast');
if (sessionToastEl) {
  const sessionToast = new understrap.Toast(sessionToastEl);
  sessionToast.show()
}
</script>

But if we add the same thing to custom-javascript.js and compile (which is what I thought was the intended workflow), it says "understrap is not defined".

Am I missing something? Why is this so complicated? Can we just call bootstrap constructors the regular way?

Thanks!

[alexatlevel]

Okay after looking more closely at 1583 I have made this work in custom-javascript.js

import Toast from 'bootstrap/js/dist/toast'

const sessionToastEl = document.getElementById('session-toast');
if (sessionToastEl) {
  const sessionToast = new Toast(sessionToastEl);
  sessionToast.show()
}

Thanks for more carefully noting this. It all does seem quite confusing. I wish the process were more clear. Anywhoo, I'm not one to do the work of making it more clear, so I shouldn't complain!

-Alex

[IanDelMar]

We're still struggling with this. It seems so unnecessarily complicated!

Sorry to hear that. Are you using a custom set of Bootstrap JS components? If not, perhaps using Bootstrap as is is an option? If so, one option would be to compile the Bootstrap source files separately and name the bundle "bootstrap". Either way would ensure that you can use Bootstrap as described in the Bootstrap documentation. Let me know if you need help setting up the build process for any of these options.