popper.js в bootstrap 4 дает SyntaxError Неожиданный экспорт токена

99

Я попытался установить 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

— Ашиш сах

проблема в том, что я не должен использовать ссылки CDN, когда на рынке много

— рекламы

34

Я столкнулся с той же проблемой, если использую 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

— Фабрицио Бертольо

2

Хотя это работает, я думаю, что это неправильный способ, пока команда BootStrap не обновит свой собственный код.

— Надим Джамали

8

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

— Майк Стротер,

1

Использование техники, предложенной в этом ответе, похоже на погоню за движущейся целью. Правильный ответ дают Марк и Зим.

— nagu

к сожалению, это больше не работает. Ошибка исчезла, но всплывающая подсказка является всплывающей подсказкой HTML по умолчанию

— deanwilliammills

243

Просто получил это и понял, почему это действительно происходит. На случай, если сюда пройдут другие:

Проверьте readme.md «Использование». Библиотека доступна в трех версиях для трех разных загрузчиков модулей. Вкратце: если вы загружаете его с <script>тегом, вы должны использовать версию UMD . Вы можете найти его в /dist/umd. По умолчанию (in /dist) - это ESNext (ECMA-Script), который не может быть загружен с помощью scriptтега.

— Марк
источник

5

Спасибо. Избавился от ошибки для меня, перейдя в файл umd.

— user1500321 02

4

Изменение ссылки на файл в папке

— umd

16

Это должен был быть принятый ответ. Потрясающие. Большое спасибо за то, что поделились.

— Аджай Кумар

3

Как указано выше, это настоящий ответ.

— Рон

1

Замечательно за быструю помощь, спасибо. Мне было интересно, что это за папки / umd и / esm, но Google не дает хороших результатов.

— Blackbam

88

Для 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, которая устранила ошибку.

— нюстерные 05

Спасибо друг! Ваш заказ устранил мою проблему. Ура!

— Noobie

17

Вы также можете добавить bootstrap.bundle.min.js и удалить popper.js из своего html.

Связанные файлы JS ( bootstrap.bundle.jsи уменьшенные bootstrap.bundle.min.js) включают [Popper] ( https://popper.js.org/ ), но не jQuery .

— webdeveloper086
источник

2

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

— vuhung3990

лучший ответ, так как он вообще не требует использования дополнительной библиотеки

— Popper.js

10

Строка 96 в README

Дистанционные цели

Popper.js в настоящее время поставляется с тремя целями: UMD, ESM и ESNext.

UMD - Универсальное определение модуля: AMD, RequireJS и глобальные переменные;
ESM - модули ES: для webpack / Rollup или браузера, поддерживающего спецификацию;
ESNext: доступен в dist/, может использоваться с webpack и 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
источник