popper.js у bootstrap 4 дає SyntaxError Несподіваний експорт токена

98

Я спробував встановити 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>

Але виникає така помилка:

Невизначена синтаксис Помилка: Несподіваний експорт маркера

Будь-які ідеї, як це виправити?

— Павел Шиляев
джерело

Не знаю, це потрібно для завантажувального файлу

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

ні, я використовував завантажувальний ремінь, але він мене ніколи не просив

— Ashish sah

1

остання запитання

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

ну якщо це так, тоді я скажу використовувати посилання CDN

— Ashish sah

проблема в тому, що я не повинен використовувати посилання CDN, коли вгору на ринку

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

33

Я зіткнувся з тією ж проблемою, якщо використовую popper.js з мережі CDN, наприклад cdnjs.

Якщо ви спостерігаєте вихідний код Bootstrap 4прикладів, як, наприклад, Navbar, ви можете побачити, що popper.min.jsзавантажується з:

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

Я включив це у свій проект, і помилка зникла. Ви можете завантажити вихідний код з

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

і включіть у свій проект як локальний файл, і він повинен працювати.

— Фані Кумар М
джерело

так. Ти правий. Я скопіював і встав цей код, і помилка зникає. CDN не вказує жодної конкретної версіїpopper.js

— Fabrizio Bertoglio

2

Хоча це працює, я вважаю, що це не належний спосіб, доки команда BootStrap не оновить власний код.

— Надім Джамалі,

8

Наведена вище URL-адреса повертає помилку, яку не знайшли (404). Я використовував getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js для Bootstrap 4.1.3, і це вирішило проблему для мене.

— Mike Strother

1

Використання техніки, запропонованої у цій відповіді, схоже на переслідування рухомої цілі. Правильну відповідь дають Марк та Зім.

— нагу

на жаль, це вже не працює. Помилка зникла, але підказка є підказкою HTML за замовчуванням

— deanwilliammills

241

Тільки що отримав це і зрозумів, чому це справді відбувається. На випадок, якщо сюди потраплять інші:

Перевірте readme.md "Використання". Lib доступний у трьох версіях для трьох навантажувачів різницевих модулів. Коротше кажучи: якщо ви завантажуєте його <script>тегом, то ви повинні використовувати версію UMD . Ви можете знайти це в /dist/umd. Типовим значенням (in /dist) є ESNext (ECMA-Script), який неможливо завантажити за допомогою scriptтегу.

— Марк
джерело

5

Дякую. Позбувся помилки для мене, змінивши файл umd.

— user1500321 02

4

Зміна посилання на файл у папці

— umd

16

Цю відповідь слід було прийняти. Приголомшливо Велике спасибі за обмін.

— Аджай Кумар,

3

Вище, це справжня відповідь.

— Рон,

1

Чудово за швидку допомогу, дякую. Мені було цікаво, що це за папки / umd та / esm, але Google не дає хороших результатів.

— Blackbam

87

Bootstrap 4 вимагає версії UMD popper.jsта переконайтеся, що порядок є таким:

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

— Зім
джерело

Версія UMD - це єдине посилання CDN, яке видалило помилку.

— нюстерні

Дякую, друже! Ваше замовлення виправило мою проблему. На здоров’я!

— Noobie

17

Ви також можете додати bootstrap.bundle.min.js і видалити popper.js у своєму html.

У комплекті файлів JS ( bootstrap.bundle.jsі зменшених bootstrap.bundle.min.js) є [Popper] ( https://popper.js.org/ ), але не jQuery .

— веб-розробник086
джерело

2

bootstrap.bundle.min.jsвключеноpopperjs

— vuhung3990

найкраща відповідь, оскільки вона взагалі не вимагає використання додаткової бібліотеки

— Popper.js

10

Рядок 96 у README

Відстань цілей

В даний час Popper.js поставляється з урахуванням 3 цілей: UMD, ESM та ESNext.

UMD - Визначення універсального модуля: AMD, RequireJS та глобальні;
ESM - модулі ES: для веб-пакета / збірного веб-переглядача або браузера, що підтримує специфікацію;
ESNext: Доступний у dist/, може використовуватися з веб-пакетом та babel-preset-env;

Обов’язково використовуйте правильний для своїх потреб. Якщо ви хочете імпортувати його з <script>тегом, використовуйте UMD.

— Роб
джерело

Використання файлу popper.min.js, що знаходиться в каталозі UMD, вирішило мою проблему, встановлену під час встановлення popper через npm. Дякую!

— Kickin_Wing

6

У вас є наступний код у 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")

Це спрацювало для мене

— ycs
джерело