web-dev-qa-db-ja.com

bootstrap 4のpopper.jsは、SyntaxErrorを返します予期しないトークンのエクスポート

bootstrap 4をインストールして、次のリンクを含めました

<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="libs/tether/dist/js/tether.min.js" ></script>
<script src="libs/popper.js/dist/popper.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js" ></script>

ただし、次のエラーが発生します。

キャッチされていない構文エラー：予期しないトークンのエクスポート

enter image description here

それを修正する方法はありますか？

javascripttwitter-bootstrapbootstrap-4popper.js
54
Павел Шиляев

cdnjsのようなCDNネットワークからpopper.jsを使用すると、同じ問題が発生しました。

たとえば Navbar のようなBootstrap 4の例のソースコードを見ると、popper.min.jsが次の場所からロードされていることがわかります。

<script src="https://getbootstrap.com/assets/js/vendor/popper.min.js"></script>

私はそれをプロジェクトに含めましたが、エラーはなくなりました。ソースコードをhttps://getbootstrap.com/assets/js/vendor/popper.min.jsからダウンロードして、ローカルファイルとしてプロジェクトに含めると、動作するはずです。

18
Phani Kumar M

これも入手して、なぜそれが実際に起こるのかを考えました。他の人がここに来る場合：

Readme.mdの「使用法」を確認してください。 libは、3つの異なるモジュールローダーの3つのバージョンで利用できます。つまり、<script>タグを使用してロードする場合は、UMDバージョンを使用する必要があります。 /dist/umdにあります。デフォルト（/dist）はESNext（ECMA-Script）で、scriptタグを使用してロードできません。

135
Marc

ブートストラップ4にはpopper.jsのUMDバージョンが必要です。順序は次のとおりにしてください。

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="~/Scripts/jquery-3.0.0.min.js"></script>
<script src="~/Scripts/umd/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
56
Zim

また、bootstrap.bundle.min.jsを追加して、html内のpopper.jsを削除することもできます。

バンドルされたJSファイル（bootstrap.bundle.jsおよび縮小されたbootstrap.bundle.min.js）include [Popper]（- https：// popper。 js.org/ ）、ただし jQuery ではありません。

5
webdeveloper086

Bundle Config bundles.Add（new ScriptBundle（ "〜/ bundles/jquery"）。Include（ "〜/ Scripts/jquery- {version} .js"））;に次のコードがあります。

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/umd/popper.min.js",
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

レイアウトhtmlの次のコード

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

これは私のために働いた

4
ycs