Importing Bootstrap JS in multiple components causes errors

[phb-ig]

I have a react app where I import the bootstrap bundle in the index.js, but then need to manually create a Carousel instance in a component file (Reduced example here: https://codesandbox.io/p/sandbox/wonderful-sutherland-6lyppw).

You can see that the dropdown works, but if you uncomment the import in Carousel.jsx, it no longer does. This happens for trying to import anything from bootstrap (Alert, Popover, etc.) and affects more than just dropdowns (e.g. collapse), so I am assuming this is a problem that comes from importing the bootstrap JS multiple times in different places.

In fact, I can avoid this problem by doing

// in index.js
import bootstrap from 'bootstrap/dist/js/bootstrap.bundle.min';
window.bootstrap = bootstrap;

// in Carousel.jsx
const BootstrapCarousel = window.bootstrap.Carousel;
BootstrapCarousel.getOrCreateInstance(`#${id}`);

but something about storing bootstrap on window bothers me. Aside from that, I should be able to import an individual class from bootstrap without re-running whatever code deals with the data-bs- attributes. Is there a better way to make this work?

[coliff]

Not sure about that specific issue but if you're using React it might be better to use https://react-bootstrap.github.io/ for the JS. Have you tried/considered that?

[phb-ig]

Unfortunately, the reason I need access to the Carousel instance is to implement a custom feature, so I think that is moving in the opposite direction.