ブートストラップがキャッチされないエラーをスローする：ブートストラップのJavaScriptにはjQueryが必要です[完了]

172

Bootstrapを使用してプログラムのインターフェイスを作成しようとしています。<head>タグにjQuery 1.11.0を追加し、それがそうだと思ったのですが、ブラウザーでWebページを起動すると、jQueryがエラーを報告します。

Uncaught Error: Bootstrap's JavaScript requires jQuery

私はjQuery 1.9.0を使用してみましたが、いくつかのCDNでホストされているコピーを試してみましたが、機能しません。誰かが私が間違っていることを指摘できますか？

— ムニムムンナ
ソース

28

Bootstrapの前に jQueryを含める...

— Adriano Repetti 2014年

私の場合、ブートストラップの前にjqueryをインストールしたところ、問題なく動作しました。ブートストラップの前に含めるだけではエラーは解決しませんでした。

— Stuti Verma 2017

私の場合、（ブートストラップテンプレートのように）フッターにjqueryを追加する代わりに、ヘッダーに追加しました。問題を解決しました。

— Adeel Raza Azeemi

1

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>

ブートストラップインポートスクリプトの前に追加するだけです。ここに最新のCDNをコピーします。cdnjs.com

— Tina Lee

371

これを試して

ファイルの順番を以下のように変更します。

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>

— スリダールR
ソース

85

うまくいきません。Bootstrapの前にjQueryがあり、とにかくエラーが出ます！

— グリーン

2

機能しましたが、下部に水平スクロールバーが表示されました

— HimalayanCoder

1

これで機能しない場合は、jQueryがBower経由でインストールされている可能性があるため、bower_components / jquery / dist / jquery.jsの下を調べる必要があるかもしれません。

— Jax Cavalera

Django-Oscarプロジェクトで働いた。このエラーは突然表示され始めます。まったく関係のないコードをいじると、レンダリングシーケンスが変更され、このエラーが発生する可能性があります。

— MadPhysicist 2017

どうやら、bootstrap.jsが2回含まれていることに気づかなかったようです-初めてクエリの前でした

— JJ Roman

91

あなたがいる場合は、ブラウザのみの環境、使用SridharRのソリューション。

あなたがいる場合はノード/ CommonJS +ブラウザの環境（例えば電子、ノード-webkitの、等。）。このエラーの理由はそのためのjQueryの輸出ロジックを最初にチェックしmoduleていません、window：

if (typeof module === "object" && typeof module.exports === "object") {
    // CommonJS/Node
} else {
    // window
}

module.exportsこの場合、自分自身を経由してエクスポートすることに注意してください。そのためjQuery、$に割り当てられていませんwindow。

したがって、これを解決するには、代わりに<script src="path/to/jquery.js"></script>;

単にrequireステートメントによってそれを自分で割り当てます：

<script>
    window.jQuery = window.$ = require('jquery');
</script>

注：electronアプリでが必要ない場合はnodeIntegration、に設定してfalse、この回避策が不要になるようにします。

— オヌールユルドゥルム
ソース

3

window.jQuery = window.$ = require('jquery');これは:(しかし、あなたの答えを見つけるために私に数時間を要した私はjQueryの2とブートストラップ3とブランチのビルドを組み立てるしようとするために働いていjQueryのそれ以降のバージョンのこの要件の変更。？

— rikkit

1

わかりませんが、これはバグではないので、そうは思いません。electronアプリでが必要ない場合はnodeIntegration、に設定してfalse、この回避策が不要になるようにします。

— OnurYıldırım

1

npm install jquerynot with bower を使用してjqueryをインストールする必要があります。

— syodage

1

ウィンドウベースのアプリとは異なるライブラリをどのように電子のお得な情報を参照するのに便利

— jwknz

私はまだそれを理解していないが、Laravelは同じアプローチを使用しています。github.com/laravel/laravel/blob/v5.7.0/resources/js/...

— ライアン・

14

ブートストラップはjquery機能を使用するため、jqueryを最初にロードする必要があります。このような：

<!doctype html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" src="css/animate.css">
        <link type="text/css" rel="stylesheet" src="css/bootstrap-theme.min.css">
        <link type="text/css" rel="stylesheet" src="css/bootstrap.min.css">
        <link type="text/css" rel="stylesheet" href="css/custom.css">

<!--   Shuffle your scripts HERE  -->
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/wow.min.js"></script>
<!--   End  -->   

        <title>pyMeLy Interface</title>
    </head>
    <body>
        <p class="title1"><strong>pyMeLy</strong></p>
        <p class="title2"><em> A stylish way to view your media</em></p>
        <div style="text-align:center;">
            <button type="button" class="btn btn-primary">Movies</button>
            <button type="button" class="btn btn-primary btn-lg">Large button</button>
        </div>
    </body>
</html>

— 124
ソース

7

ブートストラップを追加する前にJQueryを追加する必要があります

<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>

— ヴィベック・パンデー
ソース

4

JAVASCRIPTとBOOTSTRAPに間違った順序を指定しました

慣例により、ブートストラップはjqueryファイル定義に従う必要があります

<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>
<script src="lib/js/jquery-ui.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>

— モヒト・シン
ソース

1

私の場合、解決策は本当に愚かで奇妙です。

以下のコードは、_Layout.cshtmlファイルによって事前に入力されています。（私が書いたものではありません）

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

しかし、Scriptsフォルダーで確認したところ、jquery-1.10.2.min.jsさえ使用できませんでした。したがって、jquery-1.9.1.min.jsが既存のファイルである以下のようなコードを置き換えます。

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

— アショククマール
ソース

1

NodeJSを使用していますが、同じエラーが発生しました。他の回答と同様に、Bootstrapの前にJQueryをロードする必要があるため、問題もありました。ただし、NodeJSの特性により、この変更はpipeline.jsファイルに適用する必要がありました。。

pipeline.jsの変更は次のとおりです。

var jsFilesToInject = [
  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/angular.1.3.js',
  'js/dependencies/jquery.js',
  'js/dependencies/bootstrap.js',
  'js/dependencies/**/*.js',
];

私も助力にうなり声を使用しています、そしてそれは自動的にメインのhtmlページの順番を変えました：

<!--SCRIPTS-->
  <script src="/js/dependencies/angular.1.3.js"></script>
  <script src="/js/dependencies/jquery.js"></script>
  <script src="/js/dependencies/bootstrap.js"></script>
  <!-- other dependencies -->
<!--SCRIPTS END-->

それが役に立てば幸い！あなたはあなたの環境が何であるかを言わなかったので、私はこの答えを投稿することにしました。

— エルナニ
ソース

1

app.js require.jsに追加する必要があるよりも使用している場合window.$ = window.jQuery = require('jquery')

または、親ファイルがロードされた後に依存ファイルをロードすることができます。以下のコンセプトなど

require.config({
    baseUrl: "scripts/appScript",
    paths: {
        'jquery':'jQuery/jquery.min',
        'bootstrap':'bootstrap/bootstrap.min' 
    },
   shim
    shim: {
        'bootstrap':['jquery'],
        },

    // kick start application
    deps: ['app']
});

上記のコードbootstrapは依存しているJqueryため、追加しshimて依存させています

— SantoshK
ソース

0

コードに問題がない場合は、jQueryがサーバーに正常に読み込まれたことを確認します。私の場合、jQueryファイルはIDEによってサーバーに公開されましたが、Webサーバーには0 KBのファイルスタブしかありませんでした。コンテンツがないため、サーバーはブラウザにファイルを提供できませんでした。

ファイルを再公開し、サーバーが実際にファイル全体を受信したことを確認した後、Webページがエラーを表示しなくなりました。

— ザレフェス
ソース

0

BootStrapはjqueries関数を使用するため、ブートストラップjsファイルを追加する前にjQuery jsを追加する必要があります。したがって、必ず最初にjquery jsをロードし、次にbootstap jsファイルをロードしてください。

<!-- JQuery Core JavaScript -->
<script src="app/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="app/js/bootstrap.min.js"></script>

— ジャニデバン
ソース

0

これがIEイントラネットのみで発生する場合は、互換性の設定を確認し、[互換モードでイントラネットサイトを表示する]をオフにします。

IE->設定->互換性

— ダブト・ギュルビズ
ソース

0

公式ドキュメント：https : //electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

<head>
  <script>
  window.nodeRequire = require;
  delete window.require;
  delete window.exports;
  delete window.module;
  </script>
  <script type="text/javascript" src="jquery.js"></script>
</head>

— ファビオ・ソウザ
ソース

1

コード "" scripts "：[" node_modules / jquery / dist / jquery.min.js "、" node_modules / bootstrap / dist / js / bootstrap.min.js "]"を使用して

— angular.jsonで修正しました

0

上記の方法をほぼすべて試しました。

最後に、

script src="{%static 'App/js/jquery.js' %}"

静的ファイルをロードした直後、つまり{% load staticfiles %}base.html内

— カニカ
ソース

0

この問題に取り組んだ後、私は3つのステップを踏みました。

1.9.0から3.0.0までのjQueryバージョンを使用する
ブートストラップファイルを宣言する前にjQueryファイルを宣言する
これらの2つのスクリプトファイルは、<body></body>ではなくタグの下部で宣言します<head></head>。これらは私にとってはうまくいきましたが、使用しているブラウザに基づいて異なる動作があるかもしれません。

— カリスノ1
ソース