I have a site that uses JQuery and Bootstrap that has worked for a while.
I have added some Blazor WASM components to the mix. These, so far, have worked well.
I attempted to introduce Blazor.Bootstrap to the mix and I am running into some issues.

When I add the Blazor.Bootstrap, I get an error that “bootstrap” is not defined, here:

I am packaging bootstrap, jquery and all of that with webpack.
If I try to expose this bootstrap variable, I run into a catch-22.

If I add the following to my main TS file, Blazor.Bootstrap will work but then I get errors in the main site (such as drop down nav menus stop working).

window.bootstrap = require('bootstrap/dist/js/bootstrap.bundle.min.js');

I have tried to expose the bootstrap variable via webpack by using the webpack.ProvidePlugin (which I use for jquery). Adding the following results in no change to my packaged files.

"window.bootstrap": 'bootstrap',    
"bootstrap": 'bootstrap',

EDIT 1

Add this to things I have tried. According to this site (https://getbootstrap.com/docs/5.3/getting-started/webpack/) I should be using bootstrap in my main ts file like this:

import * as bootstrap from 'bootstrap';

This would, conceivably, create the global bootstrap variable that blazor.bootstrap needs but, instead, seems like bootstrap no longer gets included at all (it gets removed from my webpack output files when I do it)…

EDIT 1

Any ideas how to get out of this catch-22?