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

masukkan deskripsi gambar di sini

Ada ide bagaimana cara memperbaikinya?

javascript twitter-bootstrap bootstrap-4 popper.js Павел Шиляев
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
Павел Шиляев

Jawaban:

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