How to use jQuery + Bootstrap.js in Scala.js with scalajs bundler?

Question

1. Loading JQuery

I have the following defined to interface with JQuery:

  @js.native
  sealed trait JQuery extends js.Any {
    def hide(): js.Any
  }

  @js.native
  @JSImport("jquery/dist/jquery.slim.min.js", "jQuery")
  object JQuery extends js.Object {
    def apply(x: String): JQuery = js.native
  }

I confirmed that the @JSimport seems to work, in that the bundler js file increases by an amount approximately equal to the size of jquery/dist/jquery.slim.min.js when I use @JSimport instead of JSGlobal.

However, once I run my application, when I get to the code that does JQuery("p").hide() I get an error:

Codebook.scala:42 Uncaught TypeError: (0 , $i_jquery$002fdist$002fjquery$002emin$002ejs.jQuery) is not a function
    at Codebook.scala:42
    at $c_sjsr_AnonFunction1.apply__O__O (AnonFunctions.scala:15)
    at HTMLAnchorElement.<anonymous> (mount.scala:106)
(anonymous) @ Codebook.scala:42
$c_sjsr_AnonFunction1.apply__O__O @ AnonFunctions.scala:15
(anonymous) @ mount.scala:106

2. Loading JQuery before Bootstrap.js

After the above definitions, if I add the following code to interface with Bootstrap (and actually use it somewhere so it isn't "optimized away"), I will get a runtime error immediately on page load:

  @js.native
  sealed trait JQueryBootstrap extends JQuery {
    def collapse(arg: String): js.Any
  }

  @js.native
  @JSImport("bootstrap/dist/js/bootstrap.min.js", "jQuery")
  object JQueryBootstrap extends js.Object {
    def apply(x: String): JQueryBootstrap = js.native

    //TODO not the complete API yet, should be string || "Options":
    //TODO https://bootstrapdocs.com/v3.3.6/docs/javascript/#collapse-methods
    def collapse(arg: String): js.Any = js.native

  }

  implicit class JQueryBootstrapExtra(val jq: JQueryBootstrap) extends AnyVal {

    def collapseToggle = jq.collapse("toggle")

  }

The error on pageload is:

bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery
    at Object.<anonymous> (bootstrap.min.js:6)
    at __webpack_require__ (bootstrap abeaa4cf57d5fe91d588:19)
    at Object.<anonymous> (Utils.scala:35)
    at Object.<anonymous> (ced2ar3-view-fastopt-bundle.js:102442)
    at __webpack_require__ (bootstrap abeaa4cf57d5fe91d588:19)
    at Object.$env (bootstrap abeaa4cf57d5fe91d588:62)
    at __webpack_require__ (bootstrap abeaa4cf57d5fe91d588:19)
    at bootstrap abeaa4cf57d5fe91d588:62
    at bootstrap abeaa4cf57d5fe91d588:62
(anonymous) @ bootstrap.min.js:6
__webpack_require__ @ bootstrap abeaa4cf57d5fe91d588:19
(anonymous) @ Utils.scala:35
(anonymous) @ ced2ar3-view-fastopt-bundle.js:102442
__webpack_require__ @ bootstrap abeaa4cf57d5fe91d588:19
$env @ bootstrap abeaa4cf57d5fe91d588:62
__webpack_require__ @ bootstrap abeaa4cf57d5fe91d588:19
(anonymous) @ bootstrap abeaa4cf57d5fe91d588:62
(anonymous) @ bootstrap abeaa4cf57d5fe91d588:62

I have confirmed my code works if I load the js files manually via dynamically inserted <script> tags, but one issue with that (other than messiness and code-size optimization) is that I haven' been able to easily control the load order, but I digress...