Support native ES6 module loading
Created by: KubaSzostak
According to v5.0 documentation Bootstrap provides a version of Bootstrap built as ESM (bootstrap.esm.js and bootstrap.esm.min.js) which allows you to use Bootstrap as a module in your browser. It's not true if you want to imort bootstrap.esm.js module in vanilla Javascript (tested in 5.0.0-alpha2). In documentation we have example with such module import:
import { Toast } from 'bootstrap.esm.min.js'
It wouldn't work in pure Javascript because so-called “bare” module specifiers are currently not supported in ECMAScript modules specification. Module specifiers must be full URLs, or relative URLs starting with /
, ./
, or ../
. It's not a problem to set proper URL:
import { Toast } from './js/bootstrap.esm.min.js'
Unfortunately such import raises browser exception Uncaught TypeError: Failed to resolve module specifier "popper.js". Relative references must start with either "/", "./", or "../"..
Changing import Popper from 'popper.js'
in to import Popper from './popper.js'
doesn't help. Such import raises another browser exception Uncaught SyntaxError: The requested module './popper.js' does not provide an export named 'default'.
As far I find out Propper 1.16 doesn't provide native ES6 module. So for testing I commented out Propper import from bootstrap.esm.js source code:
// import Popper from 'popper.js';
And now native ES6 import system is working!
<script type="module">
import { Toast } from './js/bootstrap.esm.js'
let toastElement = document.getElementById("toast");
let toast = new Toast(toastElement);
let buttonElement = document.getElementById("button");
buttonElement.addEventListener("click", ()=> {
toast.show();
});
</script>
Demo page: http://localhost:5500/bootstrap-v5/bootstrap-v5.0.0-alpha2-esm-test/
I know removing Popper causes Dropdowns and Tooltips not working but for me it's not a problem. I think it would be great to have each component (Toast, Alert, Button, ...) in separate ESM module. Folks loving vanilla Javascript like me would be able to import classes that don't depend on Propper without modifying Bootstrap's source code.
I also think that writing in documentation that Bootstrap provides a version of Bootstrap built as ESM is misleading. It's rather UMD module.
- Operating system and version: Windows 10
- Browser and version: Opera 71
- Working example using pure ES6 module system: https://qsites.github.io/bootstrap-v5/bootstrap-v5.0.0-alpha2-esm-test/
Se also #28386 and #27119 (closed)