Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bootstrap as a module does not load Popper #37978

Closed
3 tasks done
jcoyne opened this issue Jan 30, 2023 · 5 comments · Fixed by #38006
Closed
3 tasks done

Bootstrap as a module does not load Popper #37978

jcoyne opened this issue Jan 30, 2023 · 5 comments · Fixed by #38006
Labels
confirmed docs has-pr v5

Comments

@jcoyne
Copy link

jcoyne commented Jan 30, 2023 •
edited
Loading

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/[email protected]/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/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/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
@jcoyne
Copy link
Author

jcoyne commented Jan 30, 2023

This does work if we change https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js to https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/esm/popper.min.js (umd -> esm)

@jcoyne jcoyne mentioned this issue Jan 30, 2023
Merged
@bertBruynooghe
Copy link

documentation refers to {{ cdn.popper }}, which refers to the UMD version iso. the ESM version.

@julien-deramond julien-deramond mentioned this issue Feb 5, 2023
Merged
6 tasks
@julien-deramond
Copy link
Member

Good catch @jcoyne. Indeed the example in https://github.com/twbs/examples/blob/main/sass-js-esm/index.html works well but wasn't good in the documentation. Created a PR to fix it.

@chauduyphanvu
Copy link

This still seems to be an issue at least on this page: https://getbootstrap.com/docs/5.2/getting-started/javascript/#using-bootstrap-as-a-module.

    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }

@julien-deramond
Copy link
Member

This still seems to be an issue at least on this page: https://getbootstrap.com/docs/5.2/getting-started/javascript/#using-bootstrap-as-a-module.

    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }

The corresponding doc fix has been merged for the 5.3.
It won't be fixed for the 5.2 documentation. We don't modify previous versions of the documentation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
confirmed docs has-pr v5
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Docs: Use ESM Popper CDN reference in 'Using Bootstrap as a module' twbs/bootstrap
4 participants
@jcoyne @bertBruynooghe @julien-deramond @chauduyphanvu