Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #31944
Closed
Open
Issue created Oct 20, 2020 by Administrator@rootContributor

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 "../".. image

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'. image

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)

Assignee
Assign to
Time tracking