I'm trying to make a webapp with just typescript and bootstrap
This is how I import my bootstrap and popper in my index.html
<script type="importmap">
{
"imports": {
"@popperjs/core": "/node_modules/@popperjs/core/dist/umd/popper.min.js",
"bootstrap": "/node_modules/bootstrap/dist/js/bootstrap.esm.min.js"
}
}
</script>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<script type="module" src="index.js"></script>
I have tried to change bootstrap import to a bundled js like
<script type="importmap">
{
"imports":{
"@popperjs/core": "/node_modules/@popperjs/core/dist/umd/popper.min.js",
"bootstrap": "/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
}
}
</script>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<script type="module" src="index.js"></script>
But this causes
Uncaught SyntaxError: The requested module 'bootstrap' does not provide an export named 'Tooltip' (at index.js:11:10)
My index.ts imports Tooltip like this:
import {Tooltip} from "bootstrap";
The popper.min.js, bootstrap.esm.min.js, and bootstrap.bundle.min.js are all installed in their respective paths.
This is my tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"module": "ES6",
"outDir": "dist",
"moduleResolution": "node",
"allowSyntheticDefaultImports" : true,
"esModuleInterop" : true,
"allowJs" : true
},
"include": [
"src/**/*.ts",
]
}