In a typescript file I have the lines,
/// <reference types="jquery" />
/// <reference types="bootstrap" />
because I am referencing the jquery and bootstrap from a CDN in the HTML.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"</script>
So I use the example code,
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {keyboard: false})
But I get the error "Cannot find name 'bootstrap'. Did you mean 'Bootstrap'? ts(2552)"
I tried to change to "Bootstrap" but I get another error "'Bootstrap' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)"
So I try to add the import it suggests,
import Bootstrap from "bootstrap";
But this results in that exact line being placed in the .mjs file, which gives me a runtime error "Uncaught TypeError: Failed to resolve module specifier "bootstrap". Relative references must start with either "/", "./", or "../"." in the browser. In the .js file, it places a "require" which also results in a runtime error in the browser.
If I manually modify the .mjs file and remove the import and use "bootstrap.Modal" it works fine.
So how should I use bootstrap in the browser from a typescript file that results in proper code in the .mjs or .ts files? Thanks