SOLVED: Bootstrap is broken by using <script type="module"></script> in a page

rubyonrails-talk
1

I have been trying to move from using tags to public URLs and towards actually packaging my JS properly but have been utterly stumped by the following bug. I’ve read everything I can and no documentation or tutorial mentions module induced conflcits.

In the following code my bootstrap dropdown menu is permanently hidden, not responding to clicks at all. However if I comment out the import statement of the inline JS module it works as expected.

<div style="height: 100px">
  <div id="user-menu" class="col-1 dropdown">
    <button id="user-menu-btn" class="btn btn-secondary dropdown-toggle"
        data-bs-toggle="dropdown" href="#">
      Menu
    </button>
    <ul class="dropdown-menu bg-secondary" aria-labelledby="user-menu-btn">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

  <div id="map" style="width: 640px; height: 480px;">
  </div>

<script type="module">
  import {initMap} from "/assets/application.js";
  initMap("map", -43, 172, 8);
</script>

PS: This is some a miniature app I made for testing the bug in isolation. Sizing works quite differently and the inline script is much more extensive in the real thing.

UPDATE:

It seems that the solution is to not import Bootstrap into the same file that my own functions are defined in. I’ll contact the documentation team and ask that they add a warning about this behaviour.

Maybe rails new --css=bootstrap should automatically set users up with a separate bootstrap.js alongside application.js