Within my typescript file, I include the following lines:
/// <reference types="jquery" />/// <reference types="bootstrap" />This is because I am referencing jQuery and Bootstrap from a CDN in the HTML.
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6a8b6a8b5fafdecf9aa">[email protected]</a>/dist/js/bootstrap.bundle.min.js"</script>Therefore, when I try to use the code snippet below:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {keyboard: false})I encounter the error message "Cannot find name 'bootstrap'. Did you mean 'Bootstrap'? ts(2552)"
Attempting to change it to "Bootstrap" results in another error "'Bootstrap' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)". In response, I try to add the suggested import:
import Bootstrap from "bootstrap";However, this leads to the exact line being included in the .mjs file, causing a runtime error "Uncaught TypeError: Failed to resolve module specifier "bootstrap". Relative references must start with either "/", "./", or "../"" in the browser. Additionally, including a "require" in the .js file also triggers a runtime error in the browser.
To remedy this situation, I manually remove the import in the .mjs file and utilize "bootstrap.Modal", which functions correctly.
In conclusion, what would be the appropriate approach to utilizing Bootstrap in a web browser from a typescript file while generating correct code within the .mjs or .ts files?