目的

Electronでデスクトップアプリを作成する際に、Bootstrap4を使用して綺麗なデスクトップアプリを作成する。

準備

BootStrapのインストール

npm install bootstrap@4.0.0-beta

jQueryのインストール

npm install jquery

Popper.jsのインストール

npm install popper.js

陥ったミス

ソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>test</title>
     <meta http-equiv="Content-Security-Policy"
         content="script-src 'unsafe-inline' 'self';default-src 'self'; style-src 'self' 'unsafe-inline';" />
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
     
</head>

<body>

	   <script src="./node_modules/jquery/dist/jquery.slim.min.js"></script>
       <script src="./node_modules/popper.js/dist/umd/popper.min.js"></script>
       <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 </body>
</html>

エラーメッセージ

デベロッパーツールに下記のメッセージが表示された。
下記のメッセージを日本語訳にすると、どうやら、jQueryを上部に持ってこないといけないらしい。

Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included >before Bootstrap's JavaScript.
at bootstrap.min.js:6

解決方法

解決方法として、

    <script src="./node_modules/jquery/dist/jquery.slim.min.js"></script>

のコードを　<head>タグ内に移動させるだけの単純な作業で解決。

ソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>test</title>
     <meta http-equiv="Content-Security-Policy"
         content="script-src 'unsafe-inline' 'self';default-src 'self'; style-src 'self' 'unsafe-inline';" />
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
      <script src="./node_modules/jquery/dist/jquery.slim.min.js"></script>
     
</head>

<body>

	 
       <script src="./node_modules/popper.js/dist/umd/popper.min.js"></script>
       <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 </body>
</html>

終わりに

　エラーメッセージの内容をしっかりと確認していなかったのが、悩ませる大きな原因でした。