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

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 >
  <div  id="desktop-header">
    <ul >
      <li >
        <a  href="#" role="button" data-bs-toggle="dropdown">Log</a>
        <ul >
         <li>...</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

The other dropdown outside of the header:

<div >
  <a href="#" role="button" data-bs-toggle="dropdown">
    <span ></span>
  </a>
  <ul >
    <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/[email protected]/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?

CodePudding user response：

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.