以下のサンプルコードように bootstrap3 で実行すると上手く動作するのですが、bootstrap4 で動作させるとエラーが発生してしまいます。
具体的には、bootstrap3.3.7 の代わりに、bootstrap4.1.3 と popper1.14.6 を導入してみましたが、以下のエラーが発生します。
このエラーを取るにはどうのように対応するべきなのでしょうか？
そもそも bootstrap4 との組み合わせは無理なのでしょうか？
UI設計／実装共にあまり知識がなく困っております。
宜しくお願い致します。

発生しているエラー：

applyStyle.js:66 Uncaught TypeError: Cannot read property 'setAttribute' of null
at Object.applyStyleOnLoad [as onLoad] (applyStyle.js:66)
at index.js:69
at Array.forEach ()
at new Popper (index.js:67)
at c.t.toggle (dropdown.js:177)
at HTMLAnchorElement. (dropdown.js:328)
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at w.fn.init.c._jQueryInterface [as dropdown] (dropdown.js:315)
at HTMLAnchorElement. (dropdown.js:472)

実行しているサンプル：
※bootstrap3を無効にし、コメントしている箇所(bootstrap4+popper)を有効にすると上記エラーが発生します。
※また popper 内包の bootstrap.bundle.js でも同様にエラーが発生します。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script> -->

  </head>
  <body class="drawer drawer--left">
    <header role="banner">
      <button type="button" class="drawer-toggle drawer-hamburger">
        <span class="sr-only">toggle navigation</span>
        <span class="drawer-hamburger-icon"></span>
      </button>
      <nav class="drawer-nav" role="navigation">
        <ul class="drawer-menu">
          <li><a class="drawer-brand" href="#">スライドメニュー</a></li>
          <li><a class="drawer-menu-item" href="#">メニュー１</a></li>
          <li class="drawer-dropdown"><a class="drawer-menu-item" href="#" data-toggle="dropdown">メニュー２ <span class="drawer-caret"></span></a>
            <ul class="drawer-dropdown-menu">
              <li><a class="drawer-dropdown-menu-item" href="#">ドロップ１</a></li>
              <li><a class="drawer-dropdown-menu-item" href="#">ドロップ２</a></li>
              <li><a class="drawer-dropdown-menu-item" href="#">ドロップ３</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </header>
    <main role="main">
    </main>

    <script>
      $(document).ready(function() {
    $('.drawer').drawer();
      });
    </script>
  </body>

</html>