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

wprowadź opis obrazu tutaj

Jakieś pomysły, jak to naprawić?

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

Odpowiedzi:

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