Why is createPopper not a function even though I'm including Popper?

Question

I have a navbar dropdown in my header and one in the body of my page. Currently, the navbar dropdown works. However, when I click on the icon that I've set to trigger the other dropdown, nothing happens.

Navbar dropdown:

<nav class="navbar navbar-expand-lg">
  <div class="collapse navbar-collapse" id="desktop-header">
    <ul class="navbar-nav">
      <li class="nav-item dropdown pe-4">
        <a class="nav-link dropdown-toggle text-dark fw-bold" href="#" role="button" data-bs-toggle="dropdown">Log</a>
        <ul class="dropdown-menu">
         <li>...</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

The other dropdown outside of the header:

<div class="dropdown d-inline">
  <a href="#" role="button" data-bs-toggle="dropdown">
    <span class="mdi mdi-18px mdi-flag-outline text-dark me-2"></span>
  </a>
  <ul class="dropdown-menu">
    <li>...</li>
    <li>...</li>
  </ul>
</div>

Here's the console error I get when trying to open the second dropdown:

bootstrap.source.js:2174 Uncaught TypeError: Popper__namespace.createPopper is not a function
    at Dropdown._createPopper (bootstrap.source.js:2174:1)
    at Dropdown.show (bootstrap.source.js:2063:1)
    at Dropdown.toggle (bootstrap.source.js:2041:1)
    at HTMLAnchorElement.<anonymous> (bootstrap.source.js:2400:1)
    at HTMLDocument.handler (bootstrap.source.js:411:1)

Here is how I've included Bootstrap JS, taken straight from the v. 5.2.x docs:

<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" 
  integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" 
  crossorigin="anonymous"
  type="application/json">
</script>

I've also tried including Popper and Bootstrap separately, again per the official docs.

Further, when I don't include type="application/json" the dropdown in the body (outside of the navbar) works but the navbar dropdown doesn't. Conversely, when I include type="application/json" the navbar dropdown works but the other one doesn't.

How do I get both dropdowns to work correctly?

score 0 · Accepted Answer · answered Jan 06 '23 at 16:59

0

In my Rails layout file, I had two sections -- content_for :head_javascripts and content_for :body_javascripts.

It was in :body_javascripts that I was trying to include Popper and Bootstrap per the documentation's instructions.

By adding the following lines:

  <%= javascript_include_tag 'railsapp' %>
  <%= javascript_include_tag 'libs/bootstrapapp' %>

to the :head_javascripts section and deleting :body_javascripts, I got both dropdowns to work.

Any insight into why exactly this solution worked and not when I tried including Bootstrap in :body_javascripts is welcome.

answered Jan 06 '23 at 16:59

Anya B

1
4

`the auto_discovery_link_tag, javascript_include_tag, and stylesheet_link_tag, are most commonly used in the section of a layout.` - see https://guides.rubyonrails.org/v7.0.0/layouts_and_rendering.html#asset-tag-helpers Most likely, including Popper and Bootstrap later is causing all the styles and scripts bindings to be late. Some content could have been already rendered. – Aurel Branzeanu Jan 07 '23 at 13:29
1

@AurelBranzeanu I see. I think this line in the Bootstrap quick start section confused me a bit: "Include Bootstrap’s CSS and JS. Place the `` tag in the `` for our CSS, and the ` – Anya B Jan 09 '23 at 15:26

Why is createPopper not a function even though I'm including Popper?

1 Answers1