Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor3 of 3 checklist items completed3/3 checklist items

Bootstrap as a module does not load Popper

Created by: jcoyne

Prerequisites

Describe the issue

I used the code listed https://getbootstrap.com/docs/5.2/getting-started/javascript/#using-bootstrap-as-a-module

And when I run it in Firefox 108.0.2 I get this error on the console

Uncaught TypeError: Popper.createPopper is not a function
    _createPopper tooltip.js:377
    show tooltip.js:214
    _enter tooltip.js:511
    setTimeout handler*_setTimeout tooltip.js:532
    _enter tooltip.js:509
    toggle tooltip.js:167
    _setListeners tooltip.js:452
    n event-handler.js:98
    addHandler event-handler.js:184
    on event-handler.js:217
    _setListeners tooltip.js:450
    Tooltip tooltip.js:123
    Popover popover.js:42
    <anonymous> test.html:25

There is a similar error in Safari 16.2:

[Error] TypeError: Popper.createPopper is not a function. (In 'Popper.createPopper(this._element,e,this._getPopperConfig(n))', 'Popper.createPopper' is undefined)
	_createPopper (898c6291-9186-4700-ae3d-fb01a53ad0e6:6:57054)
	show (898c6291-9186-4700-ae3d-fb01a53ad0e6:6:54540)
	(anonymous function) (898c6291-9186-4700-ae3d-fb01a53ad0e6:6:59279)

And the popover does not display.

Reduced test cases

This is the code listed on https://getbootstrap.com/docs/5.2/getting-started/javascript/#using-bootstrap-as-a-module

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Firefox & Safari

What version of Bootstrap are you using?

v5.2.3 & 5.3.0-alpha1