popper.js w bootstrap 4 daje SyntaxError Nieoczekiwany eksport tokenu

100

Próbowałem zainstalować bootstrap 4 i zamieściłem następujące linki

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

Ale pojawia się następujący błąd:

Uncaught syntaxError: Nieoczekiwany eksport tokenu

Jakieś pomysły, jak to naprawić?

— Павел Шиляев
źródło

Nie wiem, plik bootstrap tego wymaga

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

nie, użyłem bootstrapu, ale nigdy mnie o to nie poprosił

— Ashish sah

1

ostatnia wersja zapytana

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

cóż, jeśli tak jest, powiem, użyj linków CDN

— Ashish sah

problem polega na tym, że nie powinienem używać linków CDN, gdy uploud na rynku

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

35

Napotkałem ten sam problem, jeśli używam popper.js z sieci CDN, takiej jak cdnjs.

Jeśli przyjrzysz się kodowi źródłowemu Bootstrap 4przykładów, takich jak na przykład Navbar , zobaczysz, że popper.min.jsjest ładowany z:

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

Uwzględniłem to w swoim projekcie i błąd zniknął. Możesz pobrać kod źródłowy z

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

i dołącz do projektu jako plik lokalny i powinno działać.

— Phani Kumar M
źródło

tak. Masz rację. Skopiowałem i wkleiłem ten kod, a błąd znika. CDN nie określa żadnej konkretnej wersjipopper.js

— Fabrizio Bertoglio

2

Chociaż to działa, myślę, że to nie jest właściwy sposób, dopóki zespół BootStrap nie zaktualizuje własnego kodu.

— Nadeem Jamali,

8

Powyższy adres URL zwraca błąd „nie znaleziono” (404). Użyłem getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js dla Bootstrap 4.1.3 i to rozwiązało problem.

— Mike Strother

1

Używanie techniki sugerowanej w tej odpowiedzi jest jak gonienie za ruchomym celem. Prawidłowej odpowiedzi udzielają Marc i Zim.

— nagu

niestety to już nie działa. Błąd zniknął, ale podpowiedź jest domyślną podpowiedzią HTML

— deanwilliammills

250

Właśnie to zrozumiałem i pomyślałem, dlaczego tak się naprawdę dzieje. W przypadku, gdy inni tu dotrą:

Sprawdź plik readme.md „Użycie”. Biblioteka jest dostępna w trzech wersjach dla trzech różnych ładujących modułów. Krótko mówiąc: jeśli załadujesz go z <script>tagiem, musisz użyć wersji UMD . Możesz go znaleźć w /dist/umd. Domyślnie (in /dist) jest ESNext (ECMA-Script), którego nie można załadować za pomocą scripttagu.

— Marc
źródło

5

Dziękuję Ci. Pozbyłem się tego błędu, przechodząc do pliku umd.

— user1500321

4

Zmiana odniesienia do pliku w folderze umd rozwiązała mój problem

— Vimalan Jaya Ganesh

16

To powinna zostać zaakceptowana odpowiedź. Niesamowite. Dziękuję bardzo za udostępnienie.

— Ajay Kumar

3

Powyżej, to jest prawdziwa odpowiedź.

— Ron

1

Świetnie za szybką pomoc, dzięki. Zastanawiałem się, czym są foldery / umd i / esm, ale Google nie daje dobrych wyników.

— Blackbam

91

Bootstrap 4 wymaga wersji UMD popper.jsi upewnij się, że kolejność jest następująca:

<!-- 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
źródło

Wersja UMD to jedyne łącze CDN, które usunęło błąd.

— nyusternie

Dzięki stary! Twoje zamówienie rozwiązało mój problem. Twoje zdrowie!

— Noobie

18

Możesz także dodać plik bootstrap.bundle.min.js i usunąć popper.js w swoim html.

Dołączone pliki JS ( bootstrap.bundle.jsi zminimalizowane bootstrap.bundle.min.js) obejmują [Popper] ( https://popper.js.org/ ), ale nie jQuery .

— webdeveloper086
źródło

2

bootstrap.bundle.min.jsw zestawiepopperjs

— vuhung3990

1

Najlepszą odpowiedzią, ponieważ nie wymaga użycia dodatkowych bibliotek Popper.js w ogóle

— Buddyz

10

Wiersz 96 w README

Odległe cele

Popper.js jest obecnie dostarczany z myślą o 3 celach: UMD, ESM i ESNext.

UMD - Universal Module Definition: AMD, RequireJS i globalne;
ESM - Moduły ES: dla pakietu internetowego / pakietu zbiorczego lub przeglądarki obsługującej specyfikację;
ESNext: Dostępne w dist/, może być używane z pakietem webpack i babel-preset-env;

Upewnij się, że używasz odpowiedniego do swoich potrzeb. Jeśli chcesz zaimportować go ze <script>znacznikiem, użyj UMD.

— Obrabować
źródło

Użycie pliku popper.min.js znajdującego się w katalogu UMD rozwiązało mój problem podczas instalacji poppera przez npm. Dziękuję Ci!

— Kickin_Wing

6

Masz następujący kod w Bundle Config bundles.Add (nowy ScriptBundle ("~ / bundles / jquery"). Include ("~ / Scripts / jquery- {wersja} .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"));

następujący kod w układzie html

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

To zadziałało dla mnie

— ycs
źródło