popper.js dalam bootstrap 4 memberikan ekspor token SyntaxError Unexpected

99

Saya mencoba menginstal bootstrap 4, dan menyertakan tautan berikut

<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>

Tetapi kesalahan berikut terjadi:

SyntaxError tidak tertangkap: Ekspor token tidak terduga

Ada ide bagaimana cara memperbaikinya?

— Павел Шиляев
sumber

Saya tidak tahu, file bootstrap membutuhkannya

— Павел Шиляев

tidak, saya telah menggunakan bootstrap tetapi tidak pernah meminta kepada saya

— Ashish sah

1

versi terakhir ditanyakan

— Павел Шиляев

baik jika demikian maka saya akan memberitahu menggunakan link CDN

— Ashish sah

masalah adalah bahwa saya tidak seharusnya menggunakan tautan CDN saat keras di pasar

— Павел Шиляев

34

Saya mengalami masalah yang sama jika saya menggunakan popper.js dari jaringan CDN seperti cdnjs.

Jika Anda mengamati kode sumber dari Bootstrap 4contoh seperti misalnya Navbar, Anda dapat melihat yang popper.min.jsdimuat dari:

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

Saya memasukkannya ke dalam proyek saya dan kesalahannya hilang. Anda dapat mengunduh kode sumber dari

https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js

dan sertakan dalam proyek Anda sebagai file lokal dan seharusnya berfungsi.

— Phani Kumar M
sumber

Iya. Kamu benar. Saya sudah menyalin dan menempelkan kode itu dan kesalahannya hilang. CDN tidak menentukan versi spesifikpopper.js

— Fabrizio Bertoglio

2

Meskipun berhasil, saya rasa ini bukan cara yang tepat, sampai tim BootStrap memperbarui kodenya sendiri.

— Nadeem Jamali

8

URL di atas mengembalikan kesalahan tidak ditemukan (404). Saya menggunakan getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js untuk Bootstrap 4.1.3 dan ini menyelesaikan masalah bagi saya.

— Mike Strother

1

Menggunakan teknik yang disarankan dalam jawaban ini seperti mengejar target yang bergerak. Jawaban yang benar diberikan oleh Marc dan Zim.

— nagu

sayangnya ini tidak berfungsi lagi. Kesalahan hilang, tetapi tooltip adalah tooltip HTML default

— deanwilliammills

244

Dapatkan ini juga dan pikirkan mengapa itu benar-benar terjadi. Jika orang lain lewat di sini:

Periksa readme.md "Usage". Lib tersedia dalam tiga versi untuk tiga pemuat modul yang berbeda. Singkatnya: jika Anda memuatnya dengan <script>tag maka Anda harus menggunakan versi UMD . Anda dapat menemukannya di /dist/umd. Default (dalam /dist) adalah ESNext (ECMA-Script) yang tidak dapat dimuat menggunakan scripttag.

— Marc
sumber

5

Terima kasih. Singkirkan kesalahan untuk saya dengan mengubah ke file umd.

— pengguna1500321

4

Mengubah referensi ke file di bawah folder

— umd

16

Ini seharusnya jawaban yang diterima. Hebat. Terima kasih banyak telah berbagi.

— Ajay Kumar

3

Seperti di atas, ini adalah jawaban sebenarnya.

— Ron

1

Luar biasa atas bantuan cepatnya, terima kasih. Saya bertanya-tanya apa folder / umd dan / esm ini tetapi Google tidak memberikan hasil yang baik.

— Blackbam

88

Bootstrap 4 membutuhkan versi UMD popper.js, dan pastikan urutannya sebagai berikut:

<!-- 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>

— Zim
sumber

Versi UMD adalah satu-satunya tautan CDN yang menghapus kesalahan.

— nyusternie

Terima kasih sobat! Pemesanan Anda memperbaiki masalah saya. Bersulang!

— Noobie

17

Anda juga dapat menambahkan bootstrap.bundle.min.js dan menghapus popper.js di html Anda.

File JS yang dibundel ( bootstrap.bundle.jsdan diperkecil bootstrap.bundle.min.js) termasuk [Popper] ( https://popper.js.org/ ), tetapi tidak jQuery .

— webdeveloper086
sumber

2

bootstrap.bundle.min.jstermasukpopperjs

— vuhung3990

jawaban terbaik karena tidak memerlukan penggunaan perpustakaan Popper.js tambahan sama sekali

— BuddyZ

10

Baris 96 di README

Dist target

Popper.js saat ini dikirimkan dengan 3 target dalam pikiran: UMD, ESM dan ESNext.

UMD - Definisi Modul Universal: AMD, RequireJS dan global;
ESM - ES Modules: Untuk webpack / Rollup atau browser yang mendukung spesifikasi;
ESNext: Tersedia dalam dist/, dapat digunakan dengan webpack dan babel-preset-env;

Pastikan untuk menggunakan yang tepat untuk kebutuhan Anda. Jika Anda ingin mengimpornya dengan <script>tag, gunakan UMD.

— rampok
sumber

Menggunakan file popper.min.js yang terletak di direktori UMD menyelesaikan masalah saya saat menginstal popper melalui npm. Terima kasih!

— Kickin_Wing

6

Anda memiliki kode berikut di 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"));

kode berikut di html tata letak

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

Ini berhasil untuk saya

— ycs
sumber